知问前端——日历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; 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
});
