學(xué)習(xí)要點
- 調(diào)用datepicker() 方法
- 修改datepicker()樣式
- datepicker()方法的屬性
- datepicker()方法的事件
調(diào)用datepicker()方法
$("#date").datepicker() ;
修改datepicker()樣式
.ui-widget-header{
background:url(../img/ui_header_bg.png)
}
- 修改當(dāng)天日期的樣式
.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)', //右邊顯示出來影所，注銷后就不現(xiàn)實了
firstDay : 1, //表示從哪天開始
showWeek : true, //顯示周
weekHeader : '周', //顯示周的標(biāo)題
changeMonth:true, //出現(xiàn)下拉允許用戶能夠自由選擇
changeYear:true, // 允許用戶能夠自由選擇年份
showOn:"both", // 表示用戶可以點擊圖片因篇，也可以點擊框子顯示要是不想點擊框子顯示那就可以直接'button'
buttonImage:'images/calendar.gif', // 表示后面的那個圖片
nextText:'下個月', // 鼠標(biāo)移上去那個箭頭提示
prevText:'上個月', // 鼠標(biāo)移上去后左邊那個箭頭提示
// maxDate:0 , // 如果開啟了，則今天以后 都無法選擇了
yearRange:'1950:2020', // 設(shè)置年份的一個區(qū)間
showAnim:'blind', // 表示點擊后會有一個動畫效果"slide"表示從左到右混弥，blind 表示從上到下 , 'false'表示沒有動畫效果雨饺，不寫都可以
duration : 500 , // 表示時間
buttonText:'日歷', //表示鼠標(biāo)放到日歷的圖片上出現(xiàn)的文字
})
