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

datepicker日期选择选项

属性	默认值/类型	说明
minDate	无/对象、字符串或数值	日历中可以选择的最小日期
maxDate	无/对象、字符串或数值	日历中可以选择的最大日期
defaultDate	当天/日期	预设默认选定日期。没有指定，则是当天
yearRange	无/日期	设置下拉菜单年份的区间。比如：1950:2020
hideIfNoPrevNext	false/字符串	设置为true，如果上一月和下一月不存在，则隐藏按钮
gotoCurrent	false/布尔值	如果为true，点击今日且回车后选择的是当前选定的日期，而不是今日

index.html：

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;
}

View Code
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");