学习要点
- 调用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:'日历', //表示鼠标放到日历的图片上出现的文字
})
