知问前端——日历UI(三)
datepicker日期选择选项
| 属性 | 默认值/类型 | 说明 |
| minDate | 无/对象、字符串或数值 | 日历中可以选择的最小日期 |
| maxDate | 无/对象、字符串或数值 | 日历中可以选择的最大日期 |
| defaultDate | 当天/日期 | 预设默认选定日期。没有指定，则是当天 |
| yearRange | 无/日期 | 设置下拉菜单年份的区间。比如：1950:2020 |
| hideIfNoPrevNext | false/字符串 | 设置为true，如果上一月和下一月不存在，则隐藏按钮 |
| gotoCurrent | 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; } .a { font-size: 30px; } #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({
showButtonPanel:true,
closeText:"关闭",
currentText:"今天",
//日期的限制优先级，min和max最高
maxDate:0, //限制为只能选择今天(today)
//minDate:-8000, //限制为可以选择今天之前的8000天(约莫20年的样子)，但是年份有另外一个属性进行了限制
hideIfNoPrevNext:true,
//而maxDate和minDate只是限制日期，而年份的限制的优先级没有另外一个高
yearRange:"1950:2020",
//defaultDate:-1, //回车，今天之前的一天被选中
gotoCurrent:false,
});
选择日期的字符串表示方法
| 属性 | 说明 |
| x | 当前日期之后的x天（其中x范围从1到n）比如：1，2 |
| -x | 当前日期之前的x天（其中x范围从1到n）比如：-1，-2 |
| xm | 当前日期之后的x个月（其中x范围从1到n）比如：1m，2m |
| -xm | 当前日期之前的x个月（其中x范围从1到n）比如：-1m，-2m |
| xw | 当前日期之后的x周（其中x范围从1到n）比如：1w，2w |
| -xw | 当前日期之前的x周（其中x范围从1到n）比如：-1w，2w |
datepicker视觉效果
| 属性 | 默认值/类型 | 说明 |
| showAnim | fadeIn/字符串 | 设置false，无效果。默认效果为：fadeIn |
| duration | 300/数值 | 日历显示或消失时的持续时间，单位毫秒 |
datepicker可选特效
| 特效名称 | 说明 |
| blind | 日历从顶部显示或消失 |
| bounce | 日历断断续续地显示或消失，垂直运动 |
| clip | 日历从中心垂直地显示或消失 |
| slide | 日历从左边显示或消失 |
| drop | 日历从左边显示或消失，有透明度变化 |
| fold | 日历从左上角显示或消失 |
| highlight | 日历显示或消失，伴随着透明度和背景色的变化 |
| puff | 日历从中心开始缩放。显示时“收缩” ，消失时“生长” |
| scale | 日历从中心开始缩放。显示时“生长” ，消失时“收缩” |
| pulsate | 日历以闪烁形式显示或消失 |
| fadeIn | 日历显示或消失时伴随透明度变化 |
datepicker()方法的事件
除了属性设置外，datepicker()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。
datepicker事件选项
| 事件名 | 说明 |
| beforeShow | 日历显示之前会被调用 |
| beforeShowDay | beforeShowDay(date)方法在显示日历中的每个日期时会被调用(date参数是一个Date类对象)。该方法必须返回一个数组来指定每个日期的信息： 1.该日期是否可以被选择 （数组的第一项，为true或false） 2.该日期单元格上使用的CSS类 3.该日期单元格上显示的字符串提示信息 |
| onChangeMonthYear | onChangeMonthYear(year, month,inst)方法在日历中显示的月份或年份改变时会被调用。或者changeMonth或changeYear为true时，下拉改变时也会触发。Year：当前的年，month：当年的月，inst是一个对象，可以调用一些属性获取值 |
| onClose | onClose(dateText, inst)方法在日历被关闭的时候调用。dateText是当时选中的日期字符串，inst是一个对象，可以调用一些属性获取值 |
| onSelect | onSelect(dateText, inst)方法在选择日历的日期时被调用。dateText是当时选中的日期字符串，inst是一个对象，可以调用一些属性获取值 |
style.css中加入如下代码：
.a { font-size: 30px; }
jQuery代码：
$('#date').datepicker({
beforeShow:function() {
alert("日历显示之前被调用！");
},
beforeShowDay:function(date) {
//alert(date.getFullYear());
if(date.getDate() == 1) {
return [false,'a','不能选择1号'];
} else {
return [true];
}
},
onChangeMonthYear:function(year,month,inst) {
//alert("日历中年份或月份改变时激活！");
//alert(year);
//alert(month);
alert(inst.id); //date
},
onSelect:function(dateText,inst) {
alert(dateText);
},
onClose:function(dateText,inst) {
alert(dateText);
}
});
注意：jQuery UI只允许使用选项中定义的事件。目前还不可以试用on()方法来管理。
datepicker('action',param)方法
| 方法 | 返回值 | 说明 |
| datepicker('show') | jQuery对象 | 显示日历 |
| datepicker('hide') | jQuery对象 | 隐藏日历 |
| datepicker('getDate') | jQuery对象 | 获取当前选定日历 |
| datepicker('setDate',date) | jQuery对象 | 设置当前选定日历 |
| datepicker('destroy') | jQuery对象 | 删除日历，直接阻断 |
| datepicker('widget') | jQuery对象 | 获取日历的jQuery对象 |
| datepicker('isDisabled') | jQuery对象 | 获取日历是否禁用 |
| datepicker('refresh') | jQuery对象 | 刷新一下日历 |
| datepicker('option', param) | 一般值 | 获取options属性的值 |
| datepicker('option', param,value) | jQuery对象 | 设置options属性的值 |
只看两个方法：
alert($("#date").datepicker("getDate").getFullYear());
$("#date").datepicker("setDate","1992-10-06");
