學習要點

• 調用datepicker() 方法
• 修改datepicker()樣式
• datepicker()方法的屬性
• datepicker()方法的事件

調用datepicker()方法

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

修改datepicker()樣式

.ui-widget-header{
       background:url(../img/ui_header_bg.png)
}

• 修改當天日期的樣式

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

• 修改選定日期的樣式

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

datepicker()方法的屬性

datepicker()方法的屬性就是鍵值對

$("#date").datepicker({
            dateFormat : 'yy-mm-dd',  //日期的格式
   dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],    //短格式，有下拉的時候能使用(所謂的下拉菜單就是能夠自由的選擇月份)
    dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  // 短格式有下拉的時候能使用
    dayNamesMin : ['日','一','二','三','四','五','六'], // 顯示的是上面那個中文
    monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  // 表示上面的月份
    monthNamesShort : ['一','二','三','四','五','六','七','八','九','十','十一','十二'], //短格式，有下拉的時候能使用(所謂的下拉菜單就是能夠自由的選擇月份)
    altField : '#birthday',//表示輸入日期的位置(自己選擇)也就是找到id是birthday的input里面放入值
    altFormat : 'yy-mm-dd', // 表示輸入日期的格式(自己選擇位置后的格式)
    appendText : '(yy-mm-dd)', //右邊顯示出來，注銷后就不現實了
    firstDay : 1,  //表示從哪天開始
    showWeek : true,  //顯示周
    weekHeader : '周',  //顯示周的標題
    changeMonth:true,  //出現下拉允許用戶能夠自由選擇
    changeYear:true,    // 允許用戶能夠自由選擇年份
    showOn:"both",    // 表示用戶可以點擊圖片，也可以點擊框子顯示要是不想點擊框子顯示那就可以直接'button'
    buttonImage:'images/calendar.gif',  // 表示后面的那個圖片
    nextText:'下個月',   // 鼠標移上去那個箭頭提示
    prevText:'上個月', // 鼠標移上去后左邊那個箭頭提示
   // maxDate:0 ,   // 如果開啟了，則今天以后 都無法選擇了
    yearRange:'1950:2020',   // 設置年份的一個區間
    showAnim:'blind',         // 表示點擊后會有一個動畫效果"slide"表示從左到右，blind 表示從上到下 , 'false'表示沒有動畫效果，不寫都可以
    duration : 500 ,        // 表示時間
    buttonText:'日歷',   //表示鼠標放到日歷的圖片上出現的文字
})