js之widget日历datepicker

一、日历配置

       inline: true,
        defaultDate: 0,//当前时间  若将0改为+1，则为当前时间后的一天
        gotoCurrent: true,//设置当前时间
        showOtherMonths: true,//显示其他月份

        monthNames: ['1 月','2 月','3 月','4 月','5 月','6 月','7 月','8 月','9 月','10 月','11 月','12 月'],//显示头部格式 2014年01月09日
        dayNamesMin: ['周日','周一','周二','周三','周四','周五','周六'],.//显示中文星期，默认为英文
        dateFormat: 'yy-mm-dd',//日期格式
        firstDay: 1,//默认从左边的第一天为周日，firstday为1时：将第一天改为星期一
        showMonthAfterYear: true,//头部格式 2014年01月09日
        yearSuffix: ' 年',//年分的后缀

二、方法：

beforeShow : function(input)

在日期控件显示面板之前，触发此事件，并返回当前触发事件的控件的实例对象。

初始：$('.selector').datepicker({ beforeShow: function(input) { ... } });



beforeShowDay : function(date)

在日期控件显示面板之前，每个面板上的日期绑定时都触发此事件，参数为触发事件的日期。调用函数后，必须返回一个数组：[0]此日期是否可选(true/false)，[1]此日期的CSS样式名称(""表示默认)，[2]当鼠标移至上面出现一段提示的内容。

初始：$('.selector').datepicker({ beforeShowDay: function(date) { ... } });



onChangeMonthYear : function(year, month, inst)

当年份或月份改变时触发此事件，参数为改变后的年份月份和当前日期插件的实例。

初始：$('.selector').datepicker({ onChangeMonthYear: function(year, month, inst) { ... } });



onClose : function(dateText, inst)

当日期面板关闭后触发此事件（无论是否有选择日期），参数为选择的日期和当前日期插件的实例。

初始：$('.selector').datepicker({ onClose: function(dateText, inst) { ... } });



onSelect : function(dateText, inst)

当在日期面板选中一个日期后触发此事件，参数为选择的日期和当前日期插件的实例。

$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });



  三、实例

机房日记

$(function() {$( "#datepicker" ).datepicker({ inline: true, defaultDate: 0, gotoCurrent: true, showOtherMonths: true, monthNames: ['1 月','2 月','3 月','4 月','5 月','6 月','7 月','8 月','9 月','10 月','11 月','12 月'], dayNamesMin: ['周日','周一','周二','周三','周四','周五','周六'], dateFormat: 'yy-mm-dd', firstDay: 1, showMonthAfterYear: true, yearSuffix: ' 年', afterShow: function(){ //alert("ddd"); //updatePickerLayout(); }, onChangeMonthYear: function(y, m){ date = y.toString() + "-" + m.toString(); }, //点击面板上的某一天时：显示该天的日记 onSelect:function(dataText,inst){ // alert(dataText); } }) });