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