jqueryUI 之日历UI

学习要点

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