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/
