jQuery UI 中的 datepicker( )方法

學習要點：

1. 呼叫 datepicker( ) 方法
2. 修改 datepicker（）樣式
3. datepicker( ) 方法的屬性
4. datepicker( ) 方法的事件

一、呼叫 datepicker（）方法

$('#date').datepicker();

二、修改 datepicker（）樣式 修改樣式，可以在瀏覽器中審查元素，然後修改對應地方的樣式 // 修改當天日期的樣式

.ui-datepicker-today .ui-state-highlight{
     border: 1px solid #eee;
     color: #f60;
}

//修改選定日期的樣式

.ui-datepicker-current-day .ui-state-active{
     border: 1px solid #eee;
     color: #06f;
}

三、datepicker（）方法的屬性 日曆方法有兩種形式：1、datepicker(options)，options 是以物件鍵值對的形式傳參，每個鍵值對錶示一個選項；2、datepicker（'aciton'，param），action 是操作對話方塊方法的字串，param則是 options 的某個選項。

// 設定日期格式

$('#date').datepicker({
    dateFormat: 'yy-mm-dd'
});

// 指定星期中天的最小格式

$('#date').datepicker({
     dayNamesMin: ['日','一','二','三','四','五','六'],
});

// 指定月份的長格式

$('#date').datepicker({
     monthNames: ['一月','二月','三月','四月','五月','六月',
    '七月','八月','九月','十月','十一月','十二月']
     
});

// 指定input域

<input type="test" id="abc" />
 
$('#date').datepicker({
     altField: '#abc'
})  

// 新增到input域的可選日期格式

<input type="test" id="abc" />
 
$('#date').datepicker({
     altField: '#abc',
     altFormat: 'yy/mm/dd'
})

// 在input域後附加文字

$('#date').datepicker({
     appendText: '日曆'
})

datepicker外觀選項：

//顯示多個日曆

$('#date').datepicker({
     numberOfMonth: 3,     // 一排3個
     numberOfMonth: [3,2], // 三排每排2個    
});   

//填充沒有顯示的單元格，但無法使用

$('#date').datepicker({
     showOtherMonths: true,
});

//選擇上個月或下個月日期，前提是，showOtherMonths設定為 true

$('#date').datepicker({
     showOtherMonths: true,
     selectOtherMonths: true,
})   

//顯示快速選擇月份的下拉列表

$('#date').datepicker({
     changeMonth: true,
     monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']  //且讓月份顯示為中文 
})

//顯示快速選擇年份的下拉列表

$('#date').datepicker({
     changeYear: true
})

//觸發方式

$('#date').datepicker({
     showOn: 'button'     // 點選按鈕
})

//可選最大日期

$('#date').datepicker({
     maxDate: 0  // 當前日期的 0 天，就是當天   
})

// 如果上月和下月不存在則隱藏按鈕

$('#date').datepicker({
     maxDate: 0  // 當前日期之後的 0 天，就是當天
     hideIfNoPrevNext: true   
})

//可選最小日期

$('#date').datepicker({
     maxDate: 0  // 當前日期之後的 0 天，就是當天
     minDate: -5 // 當前日期之前的 5 天
     hideIfNoPrevNext: true   
})

// 生日選擇時，只需配合maxDate和yearRange

$('#date').datepicker({
     maxDate: 0  // 當前日期之後的 0 天，就是當天
     hideIfNoPrevNext: true,
     // maxDate和minDate只是限制日期，而年份限制的優先順序沒有另外一個高
     yearRange: '1950:2020' 
})

四、datepicker（）方法的事件 除了屬性設定外，datepicker( ) 方法也提供了大量的事件。這些事件可以給各種不同狀態時提供回撥函式。這些回撥函式中的 this 值等於對話方塊內容的div 物件，不是整個對話方塊的div. // 禁用每個月的1號

$('#date').datepicker({
     beforeShowDay: function(date){
         if(date.getDate() == 1 ){
              return [false,'class名','不能選擇1號']; 
         }else{
             return [true]; 
         } 
     }
})

注意：jQuery UI只允許使用選項中定義的事件。目前還不可以使用 on( ) 方法來管理。 （一般在內部寫是初始化時使用的，在外部寫是做一些變化時使用的）

//獲取當前選定日期

alert($('#date').datepicker('getDate'));     //獲取當前選定日期
alert($('#date').datepicker('getDate').getFullYear());     //獲取當前選定日期的年份

//設定當前選定日期

$('#date').datepicker('getDate','2013-02-01')

【* 漢化 *】 注意：預設情況下，日曆顯示為英文。如果你想使用中文日曆，直接引入中文語言包即可。或者把中文語言包的幾行程式碼整合到某個 js 檔案裡即可。參考：http://www.ycku.com/jquery-44/

jQuery(function($){
  $.datepicker.regional['zh-CN'] = {
      closeText: '關閉',
      prevText: '<上月',
      nextText: '下月>',
      currentText: '今天',
      monthNames: ['一月','二月','三月','四月','五月','六月',
        '七月','八月','九月','十月','十一月','十二月'],
      monthNamesShort: ['一','二','三','四','五','六',
        '七','八','九','十','十一','十二'],
      dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
      dayNamesShort: ['週日','週一','週二','週三','週四','週五','週六'],
      dayNamesMin: ['日','一','二','三','四','五','六'],
      weekHeader: '周',
      dateFormat: 'yy-mm-dd',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: true,
      yearSuffix: '年'};
  $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});