zoukankan      html  css  js  c++  java
  • 知问前端——日历UI(二)

       datapicker外观选项

    属性 默认值/类型 说明
    disabled false/布尔值 禁用日历
    numberOfMonths 1/数值 日历中同时显示的月份个数。默认为1,如果设置3就同时显示3个月份。也可以设置数组:[3,2],3行2列共6个
    showOtherMonths false/布尔值 如果设置为true,当月中没有使用的单元格会显示填充, 但无法使用。默认为false,会隐藏无法使用的单元格
    selectOtherMonths false/布尔值 如果设置为true,表示可以选择上个月或下个月的日期。前提是showOtherMonths设置为true
    changeMonth false/布尔值  
    如果设置为true,显示快速选择月份的下拉列表
    changeYear false/布尔值 如果设置为true,显示快速选择年份的下拉列表
    isRTL false/布尔值 是否由右向左绘制日历
    autoSize false/布尔值 是否自动调整控件大小, 以适应当前的日期格式的输入
    showOn 'focus'/字符串 默认值为focus,获取焦点触发,还有button点击按钮触发和both任一事件发生时触发
    buttonText '...'/字符串 触发按钮上显示的文本
    buttonImage 无/字符串 图片按钮地址
    buttonImageOnly false/布尔值 设置为true则会使图片代替按钮
    showButtonPanel false/布尔值 开启显示按钮面板
    closeText 'done'/字符串 设置关闭按钮的文本
    currentText 'Today'/字符串 设置获取今日日期的按钮文本
    nextText 'Next'/字符串  设置下一月的alt文本
    prevText 'Prev'/字符串 设置上一月的alt文本
    navigationAsDateFormat false/布尔值 设置prev、next和current的文字可以是format的日期格式
    yearSuffix 无/字符串 附加在年份后面的文本
    showMonthAfterYear false/布尔值 设置为true,则将月份放置在年份之后

       index.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>知问前端</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="header">
            <div class="header_main">
                <h1>知问</h1>
                <div class="header_search">
                    <input type="text" name="search" class="search" />
                </div>
                <div class="header_button">
                    <button id="search_button">查询</button>
                </div>
                <div class="header_member">
                    <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
                </div>
            </div>
        </div>
        
        <div id="reg" title="会员注册">
            <p>
                <label for="user">账号:</label>
                <input type="text" name="user" class="text" id="user" title="请输入账号,不少于2位!"></input>
                <span class="star">*</span>
            </p>
            <p>
                <label for="pass">密码:</label>
                <input type="password" name="pass" class="text" id="pass" title="请输入密码,不少于6位!"></input>
                <span class="star">*</span>
            </p>
            <p>
                <label for="email">邮箱:</label>
                <input type="text" name="email" class="text" id="email" title="请输入正确的邮箱!"></input>
                <span class="star">*</span>
            </p>
            <p>
                <label>性别:</label>
                <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male"></label></input>
                <input type="radio" name="sex" id="female" value="female"><label for="female"></label></input>
            </p>
            <p>
                <label for="date">生日:</label>
                <input type="text" name="date" readonly="readonly" class="text" id="date"></input>
            </p>
        </div>
    
    </body>
    </html>

       style.css:

    body {
        margin: 40px 0 0 0;
        padding: 0;
        font-size: 12px;
        font-family: 宋体;
        background: #fff;
    }
    /* 更改jQuery UI主题的对话框header的背景 */
    .ui-widget-header {
        background: url(img/ui_header_bg.png);
    }
    /* 按钮正常状态的背景 */
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background:url(img/ui_header_bg.png);
    }
    /* 按钮点击状态的背景 */
    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
        background:url(img/ui_white.png);
    }
    /* 工具提示的文本颜色 */
    .ui-tooltip {
        color: #666;
    }
    /* 邮箱自动补全的悬停背景色 */
    .ui-menu .ui-state-focus {
        background:url(img/ui_header_bg.png);
    }
    .ui-menu {
        color: #666;
    }
    /* 日历UI的今天单元格样式 */
    .ui-datepicker-today .ui-state-highlight {
        border:1px solid #eee;
        color:#f60;
    }
    /* 日历UI的选定单元格样式 */
    .ui-datepicker-current-day .ui-state-active {
        border:1px solid #eee;
        color:#06f;
    }
    #header {
        width: 100%;
        height: 40px;
        background: url(img/header_bg.png);
        position: absolute;
        top:0;
    }
    #header .header_main {
        width: 800px;
        height: 40px;
        margin: 0 auto;
    }
    #header .header_main h1 {
        font-size: 20px;
        margin: 0;
        padding: 0;
        color: #666;
        line-height: 40px;
        float: left;
        padding: 0 10px;
    }
    #header .header_search {
        padding: 6px 0 0 0;
        float: left;
    }
    #header .header_search .search {
        width: 300px;
        height: 24px;
        border: 1px solid #ccc;
        background: #fff;
        color: #666;
        font-size: 14px;
        text-indent: 5px;
    }
    #header .header_button {
        padding: 5px;
        float: left;
    }
    #header .header_member {
        float: right;
        line-height: 40px;
        color: #555;
        font-size: 14px;
    }
    #header .header_member a {
        text-decoration: none;
        font-size: 14px;
        color: #555;
    }
    #reg {
        padding: 15px 0 0 15px;
    }
    #reg p {
        margin: 10px 0;
        padding: 0;
    }
    #reg p label {
        font-size: 14px;
        color: #666;
    }
    #reg .star {
        font-size: 14px;
        color: red;
    }
    
    #reg .text {
        border-radius: 4px;
        border: 1px solid #ccc;
        background: #fff;
        width: 200px;
        height: 25px;
        line-height: 25px;
        text-indent: 5px;
        font-size: 13px;
        color: #666;
    }

       jQuery代码:

    $("#date").datepicker({
        dateFormat:"yy-mm-dd",
        //dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        //dayNamesShort:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        dayNamesMin:['日','一','二','三','四','五','六'],
        monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
        monthNamesShort:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
        //appendText:"日历",
        showWeek:true,
        weekHeader:"周",
        firstDay:1,
    
        //disabled:true,
        //numberOfMonths:3,
        //numberOfMonths:[3,2],
        showOtherMonths:true,
        selectOtherMonths:true,
    
        changeMonth:true,
        changeYear:true,
    
        //isRTL:true,
    });

       现在来测试autoSize属性,若style.css如下:

    body {
        margin: 40px 0 0 0;
        padding: 0;
        font-size: 12px;
        font-family: 宋体;
        background: #fff;
    }
    /* 更改jQuery UI主题的对话框header的背景 */
    .ui-widget-header {
        background: url(img/ui_header_bg.png);
    }
    /* 按钮正常状态的背景 */
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background:url(img/ui_header_bg.png);
    }
    /* 按钮点击状态的背景 */
    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
        background:url(img/ui_white.png);
    }
    /* 工具提示的文本颜色 */
    .ui-tooltip {
        color: #666;
    }
    /* 邮箱自动补全的悬停背景色 */
    .ui-menu .ui-state-focus {
        background:url(img/ui_header_bg.png);
    }
    .ui-menu {
        color: #666;
    }
    /* 日历UI的今天单元格样式 */
    .ui-datepicker-today .ui-state-highlight {
        border:1px solid #eee;
        color:#f60;
    }
    /* 日历UI的选定单元格样式 */
    .ui-datepicker-current-day .ui-state-active {
        border:1px solid #eee;
        color:#06f;
    }
    #header {
        width: 100%;
        height: 40px;
        background: url(img/header_bg.png);
        position: absolute;
        top:0;
    }
    #header .header_main {
        width: 800px;
        height: 40px;
        margin: 0 auto;
    }
    #header .header_main h1 {
        font-size: 20px;
        margin: 0;
        padding: 0;
        color: #666;
        line-height: 40px;
        float: left;
        padding: 0 10px;
    }
    #header .header_search {
        padding: 6px 0 0 0;
        float: left;
    }
    #header .header_search .search {
        width: 300px;
        height: 24px;
        border: 1px solid #ccc;
        background: #fff;
        color: #666;
        font-size: 14px;
        text-indent: 5px;
    }
    #header .header_button {
        padding: 5px;
        float: left;
    }
    #header .header_member {
        float: right;
        line-height: 40px;
        color: #555;
        font-size: 14px;
    }
    #header .header_member a {
        text-decoration: none;
        font-size: 14px;
        color: #555;
    }
    #reg {
        padding: 15px 0 0 15px;
    }
    #reg p {
        margin: 10px 0;
        padding: 0;
    }
    #reg p label {
        font-size: 14px;
        color: #666;
    }
    #reg .star {
        font-size: 14px;
        color: red;
    }
    /*
    #reg .text {
        border-radius: 4px;
        border: 1px solid #ccc;
        background: #fff;
         200px;
        height: 25px;
        line-height: 25px;
        text-indent: 5px;
        font-size: 13px;
        color: #666;
    }
    */

       jQuery代码:

    $("#date").datepicker({
        autoSize:true, //是否自动调整控件大小,以适应当前的日期格式的输入
    });

       再来看剩余的属性:

    $("#date").datepicker({
        showOn:"button",
        buttonText:"日历",
        buttonImage:"img/calendar.gif",
        buttonImageOnly:true,
            
        showButtonPanel:true,
        closeText:"关闭",
        currentText:"今天dd",
    
        nextText:"下个月mm",
        prevText:"上个月mm",
        navigationAsDateFormat:true, //设置prev、next和current的文字可以是format的日期格式
    
        yearSuffix:"年",
        showMonthAfterYear:true
    });

      

  • 相关阅读:
    pipelinewise 学习二 创建一个简单的pipeline
    pipelinewise 学习一 docker方式安装
    Supercharging your ETL with Airflow and Singer
    ubuntu中使用 alien安装rpm包
    PipelineWise illustrates the power of Singer
    pipelinewise 基于singer 指南的的数据pipeline 工具
    关于singer elt 的几篇很不错的文章
    npkill 一个方便的npm 包清理工具
    kuma docker-compose 环境试用
    kuma 学习四 策略
  • 原文地址:https://www.cnblogs.com/yerenyuan/p/5453581.html
Copyright © 2011-2022 走看看