知问前端——日历UI(二)

时间：2016-05-03 02:00:11 阅读：184 评论：0 收藏：0 [点我收藏+]

标签：

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;
    width: 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
});

知问前端——日历UI(二)

标签：

原文地址：http://www.cnblogs.com/yerenyuan/p/5453581.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行