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