air-datepicker是一款跨浏览器轻量级的jQuery日期选择器插件。该日期选择器使用es5和css-flexbox来制作,可以在所有的现代浏览器中正常工作。

安装

可以通过bower来安装Air Datepicker插件。

bower i --save air-datepicker                
              

使用方法

使用该日期选择器插件需要引入datepicker.min.js、datepicker.en.js和datepicker.min.css文件。

<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
<script src="dist/js/datepicker.min.js"></script>
<!-- Include English language -->
<script src="dist/js/i18n/datepicker.en.js"></script>               
              
HTML结构

Air Datepicker会自动将class为.datepicker-here的元素中初始化为日期选择器。

<input type='text' class="datepicker-here" data-position="right top" />                
              
初始化插件

你也可以手动对该日期选择器进行初始化。

// Initialization
$('#my-element').datepicker([options])
// Access instance of plugin
$('#my-element').data('datepicker')                
              

配置参数

  • classes:类型:string;默认值:""。日期选择器的扩展class类。
  • inline:类型:Boolean;默认值:false;如果设置为true。那么日期选择器将一直可见。
  • language:类型:string|object;默认值:"ru"。日期选择器的语言。如果传入的是字符串,会在Datepicker.language对象中查找语言,如果传入的是对象,则直接在对象中查找。
  • startDate:类型:Date;默认值:new Date()。初始化时显示的日期。
  • firstDay:类型:number;默认值:""。一周的哪一天,可能值从0-6,0表示星期天,6表示星期六。
  • weekends:类型:array;默认值:[6, 0]。作为周末的一组日期。class .-weekend-将会被使用到相应的单元中,默认是星期六和星期天。
  • dateFormat:类型:string;默认值:""。日期格式。默认使用当前本地日期格式。
    • @:毫秒时间。
    • d:天数。
    • dd:前面带0的天数。
    • D:简写的天数
    • DD:天数的全称。
    • m:月份数值。
    • mm:前面带0的月份数值。
    • M:简写的月份。
    • MM:月份的全称。
    • yy:2个数字的年份。
    • yyyy:4个数字的年份。
    • yyyy1:包含当前年份的十年的第一年。
    • yyyy2:包含当前年份的十年的最后一年。
  • altField:类型:string|jQuery;默认值:""。输入框的替换文本,使用altFieldDateFormat来格式化日期。
  • altFieldDateFormat:类型:string;默认值:"@"。替换文本的日期格式。
  • toggleSelected:类型:boolean;默认值:true。如果为true,那么点击在相应单元中的时候将移除选择。
  • keyboardNav:类型:boolean;默认值:true。如果为true则可以使用键盘来对日期选择器进行导航。
    • Ctrl + → | ↑:将月份向前移动。
    • Ctrl + ← | ↓:将月份向后移动。
    • Shift + → | ↑:将年份向前移动。
    • Shift + ← | ↓:将年份向后移动。
    • Alt + → | ↑:向前移动10年。
    • Alt + ← | ↓:向后移动10年。
    • Ctrl + Shift + ↑:移动到下一个视图。
    • Esc:隐藏日期选择器。
  • position:类型:string;默认值:"bottom left"。日期选择器相对于输入框的位置。
  • offset:类型:number;默认值:12。位置偏移值。
  • view:类型:string;默认值:"days"。日期选择器视图。可选值有:
    • days- display days of one month
    • months- display months of one year
    • years- display years of one decade
  • minView:类型:string;默认值:"days"。最小的日期选择器视图。在该视图上选择一个单元格将不会渲染下一个视图,而是直接激活它。
  • showOtherMonths:类型:boolean;默认值:true。如果设置为true,其它月份的天数将可见。
  • selectOtherMonths:类型:boolean;默认值:true。如果设置为true,那么其它月份的天数可以被选择。
  • moveToOtherMonthsOnSelect:类型:boolean;默认值:true。如果设置为true,那么选择其它月份的天数时,将移动到该月份。
  • showOtherYears:类型:boolean;默认值:true。如果设置为true,在10年中将可见其它年份。
  • selectOtherYears:类型:boolean;默认值:true。如果设置为true,在10年中将可选择其它年份。
  • moveToOtherYearsOnSelect:类型:boolean;默认值:true。如果设置为true,在选择其它年份时将移动到该年份。
  • minDate:类型:Date;默认值:""。选择的最小日期,所有在该日期之前的日期都可以被激活。
  • maxDate:类型:Date;默认值:""。选择的最打日期,所有在该日期之后的日期都不可以被选择。
  • disableNavWhenOutOfRange:类型:boolean;默认值:true。如果设置为true,那么在小于最小日期或大于最大日期的某个日期,导航按钮将不可用。
  • multipleDates:类型:boolean|number;默认值:false。如果设置为true,可以选择多个日期。
  • multipleDatesSeparator:类型:string;默认值:","。多个日期之间的分割符。
  • range:类型:boolean;默认值:false。设置为true可以选择一个日期范围。
  • todayButton:类型:boolean;默认值:false。设置为true时,"Today"按钮将可见。
  • clearButton:类型:boolean;默认值:false。设置为true时,"Clear"按钮将可见。
  • showEvent:类型:string;默认值:"focus"。显示日期选择器的类型。
  • autoClose:类型:boolean;默认值:false。如果设置为true,在选择一个日期后,日期选择器将关闭。
  • prevHtml:类型:string;默认值:<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>。"next"按钮的标签内容。
  • nextHtml:类型:string;默认值:<svg><path d="M 14,12 l -5,5 l 5,5"></path></svg>。"prev"按钮的标签内容。
  • navTitles:类型:object;默认值:
    navTitles = {
        days: 'MM, <i>yyyy</i>',
        months: 'yyyy',
        years: 'yyyy1 - yyyy2'
    };  
    

    当前视图的日期选择器的标题,也可以使用HTML标签,例如:

    $('#my-datepicker').datepicker({
       navTitles: {
         days: '<h3>Check in date:</h3> MM, yyyy'
       }
    }) 
    
  • monthsField:类型:string;默认值:"monthsShort"。Field name from localization object which should be used as months names, when view is 'months'.

关于该日期选择器插件更详细的信息请参考:http://t1m0n.name/air-datepicker/docs/