日历ui

日历ui

1. 修改样式

2. 属性方法

   国际化选项

属性	默认值/类型	说明
date/Format	mm/dd/yy/时间	指定日历返回的日期格式
dayNames	英文日期/数组	以数组形式指定日期中的天的长格式。Eg，Sunday、Monday等。中文：星期日
dayNamesShort	英文日期/数组	以数组形式指定日期中的天的短格式。Eg，Sun、Mon等
dayNamesMin	英文日期/数组	以数组形式指定日期中的天的最小格式。Eg，Su、Mo等
monthNames	英文日期/数组	以数组形式指定月份的长格式名称（Janurary）。数组必须从Janurary开始
monthNamesShort	英文日期/数组	以数组形式指定月份的短格式名称（Jan）。数组必须从Janurary开始
altField	无/字符串	为日期选择器指定一个<input>域
altFormat	无/字符串	添加到<input>域的可选日期格式
appendText	无/字符串	在日期选择器的<input>域后面附加文本
showWeek	false/布尔值	显示周
weekHeader	‘Wk’/字符串	显示周的标题
firstDay	0/数值	指定日历中的星期从星期几开始。0表示星期日

 

1、$('#date').datepicker(

      {dateFormat  :'yy-mm-dd'});

2、$('#date').datepicker(

      {

     dateFormat :'yy-mm-dd',

     dayNamesMin:['日','一','二','三','四','五','六'],

monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']});

 

3、$('#date').datepicker(

      {

        dateFormat  :'yy-mm-dd',

        altField:"#abc"

    });

日期出现在别的文本框中

4、$('#date').datepicker(

      {dateFormat  :'yy-mm-dd',

       altField:"#abc",

       altFormat:'dd/mm/yy',

        appendText:"calender",//文本框后面出现了文本

        showWeek:true  //日历最左边一列显示了一年的第几周

    });

5、$('#date').datepicker(

      {    dateFormat  :'yy-mm-dd',

           altField:"#abc",

           altFormat:'dd/mm/yy',

           appendText:"calender",

           showWeek:true,

           weekHeader:"zhou",

           firstDay:1});

 

外观选项

属性	默认值/类型	说明
disabled	false/布尔值	禁用日历
numberOfMonths	1/数值	日历中同时显示的月份个数。默认为1，如果设置为3，就同时显示3个月份。也可以设置数组[3,2],3行2列共6个
showOtherMonths	false/布尔值	如果设置为true，当月中没有使用的单元格会显示填充，但无法使用。默认为false，会隐藏无法使用的单元格
selectOtherMonths	false/布尔值	如果设置为true，可以选择上个月或者下个月的日期，前提是showOtherMonths设置为true
changeMonth	false/布尔值	如果设置为true，显示快速选择月份的下拉列表
changeYear	false/布尔值	如果设置为true，显示快速选择年份的下拉列表
isRTL	false/布尔值	是否由右向左绘制日历
autoSize	false/布尔值	是否自动调整控件大小，以适应当前的日期格式的输入
showOn	‘focus’/字符串	默认值为focus，获取焦点触发，还有button点击按钮触发和both任一事件发生时触发
buttonText	‘…’/字符串	触发按钮上显示的文本
buttonImage	无/字符串	图片按钮地址
buttonImageOnly	false/布尔值	设置为true则会使图片代替按钮
showButtonPanel	false/布尔值	设置开启按钮面板
closeText	‘done’/字符串	设置关闭按钮的文本
currentText	‘Today’/字符串	获取今日日期的按钮文本
nextText	‘Next’/字符串	设置下一个月的alt文本
prevNext	‘prev’/字符串	设置上一个月的alt文本
navigationAsDateFormat	false/字符串	设置prev、next和current的文字可以是format的日期格式
yearSuffix	无/字符串	附加在年份后面的文本
showMonthAfterYear	false/布尔值	设置为true，则将月份放在年份之后

1、$('#date').datepicker(

      {

        dateFormat  :'yy-mm-dd',

           altFormat:'dd/mm/yy',

           showWeek:true,

           firstDay:1,

           changeMonth:true,

           changeYear:true });

 

日历日期选择

属性	默认值/类型	说明
minDate	无/对象、字符串或数值	日历中可以选择的最小日期
maxDate	无/对象、字符串或数值	日历中可以选择的最大日期
defaultDate	当天/日期	预设默认选定日期。没有指定
yearRange	无/日期	设置下拉菜单年份的区间，eg：1995-2020
hideIfNoPrevNext	false/字符串	设置为true，如果上一个月和下一个月不存在则隐藏按钮
gotoCurrent	false/布尔值	如果为true，点击今日且回车后选择的是当前选定的日期，而不是今日

1、

 

$('#date').datepicker(

      {

        dateFormat  :'yy-mm-dd',

         altFormat:'dd/mm/yy',

         showWeek:true,

           firstDay:1,

           changeMonth:true,

           changeYear:true,

           showOn:'both',

           showButtonPanel:true,

          showMonthAfterYear:true ,

          maxDate:0,//表示当前日期之后的x天可以选择

      });

2、

 

 

 

 

 

$('#date').datepicker(

      {

        dateFormat  :'yy-mm-dd',

         altFormat:'dd/mm/yy',

         showWeek:true,

           firstDay:1,

           changeMonth:true,

           changeYear:true,

           showOn:'both',

           showButtonPanel:true,

          showMonthAfterYear:true ,

          minDate:-2//表示当前日期之前的x天可以选择

      });

3、$('#date').datepicker(

      {dateFormat  :'yy-mm-dd',

       altFormat:'dd/mm/yy',

       showWeek:true,

       firstDay:1,

       changeMonth:true,

       changeYear:true,

       showOn:'both',

       showButtonPanel:true,

      showMonthAfterYear:true ,  yearRange:'1950:2020'

   });

 

1. 日历ui事件

事件名	说明
beforeShow	日历显示之前会被调用
beforeShowDay(date)	beforeShowDay(date)方法在显示日历中的每个日期时会被调用（date参数是一个Date类对象），该方法必须返回一个数组来指定每个日期的信息： 1、              该日期是否可以被选择 2、              该日期单元格上使用的CSS类 3、              该日期单元格上显示的字符串提示信息
onChangeMonthYear	onChangeMonthYear（year,month,inst）方法在日历显示中的月份或年份改变时会被调用，或者changeMonth或changeYear为true时，下拉改变时也会触发调用，year是当前的年，month是当前的月，inst是一个对象，可以调用 一些属性
onClose	onClose（dateText，inst），关闭时调用
onSelect	选择时调用

1、$('#date').datepicker(

      {

        dateFormat  :'yy-mm-dd',

           altFormat:'dd/mm/yy',

           showWeek:true,

           firstDay:1,

           changeMonth:true,

           changeYear:true,

           showOn:'both',

           showButtonPanel:true,

          showMonthAfterYear:true ,

          yearRange:'1950:2020',

          defaultDate:-1,

          beforeShowDay:function(date){

            if(date.getDate()==1){//每个月1号

               return [false，'a','不能选择一号'];//禁用

            }else

               {return [true];

               }}});

 

每个月的一号都被禁用

datepicker（）外部用法

方法	返回值	说明
datepicker（‘show‘）	jQuery对象	显示日历
datepicker（‘hide‘）	jQuery对象	隐藏日历
datepicker（‘getDate‘）	jQuery对象	获取当前选定日历
datepicker（‘setDate‘，date）	jQuery对象	设置当前选定日历
datepicker（‘destroy‘）	jQuery对象	删除日历，直接阻挡
datepicker（‘widget‘）	jQuery对象	获取日历的jQuery对象
datepicker（‘isDisabled‘）	jQuery对象	获取日历是否禁用
datepicker（‘refresh‘）	jQuery对象	刷新一下日历
datepicker（‘option‘，param）	一般值	获取option属性的值
datepicker（‘option‘，param，value）	jQuery对象	设置option属性的值