http://t1m0n.name/air-datepicker/docs/ 文档
<link href="../Content/dist/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="../Content/dist/css/select2.css" rel="stylesheet" type="text/css" />
//时间选择
<input class="datepicker-here form-control date_picker" data-language="zh" placeholder="请选择" type="text" value="">
//时间段选择
<input class="datepicker-here form-control date_picker" data-language="zh" data-range="true" data-multiple-dates-separator=" - " placeholder="请选择时间段">
//时间段月份选择
<input class="datepicker-here form-control date_picker" data-language="zh" data-range="true" data-multiple-dates-separator=" - " data-min-view="months" data-view="months" data-date-format="yyyy-mm" placeholder="请选择时间段”>
// 时分时间段
<input class="datepicker-here form-control date_picker date_picker-time" data-language="zh" data-range="true" data-multiple-dates-separator=" - " placeholder="请选择时间段">
// 时间组件时分显示
$(“.date_picker-time").datepicker({
timepicker: true,
// maxMinutes: 0,
"time-format": 'hh:ii',
language: "zh",
startDate: new Date('2018-06-14 00:00:00'),
})
// 月时间段
<input class="datepicker-here form-control date_picker" data-min-view="months" data-view="months" data-date-format="yyyy-mm" data-language="zh" data-range="true" data-multiple-dates-separator=" - " placeholder="请选择时间段">
// 年时间段
<input class="datepicker-here form-control date_picker" data-min-view="years" data-view="years" data-date-format="yyyy" data-language="zh" data-range="true" data-multiple-dates-separator=" - " placeholder="请选择时间段">
<script src="../Scripts/dist/js/datepicker.js"></script>
<script src="../Scripts/dist/js/i18n/datepicker.zh.js"></script>
<script src="../Scripts/dist/js/select2.js"></script>
//时间下拉框位置过低时向上展开
$(".step-conright .date-input").on("click", function() {
var boxTop = $(this).offset().top;
var formTop = $(window).height()-260;
if (boxTop > formTop) {
var yuanTop = $(".datepicker.active").offset().top;
var topVal = yuanTop - 290;
$(".datepicker.active").css({"top": topVal});
$(".-bottom-left- .datepicker--pointer, .-top-left- .datepicker--pointer").css({"top": "auto","bottom": "-5px"});
$(".datepicker--pointer").css({"border-top": "none", "border-right": "none", "border-bottom": "1px solid #dbdbdb", "border-left": "1px solid #dbdbdb"});
} else {
$(".-bottom-left- .datepicker--pointer, .-top-left- .datepicker--pointer").css({"bottom": "auto","top": "-5px"});
$(".datepicker--pointer").css({"border-top": "1px solid #dbdbdb", "border-right": "1px solid #dbdbdb", "border-bottom": "none", "border-left": "none"});
}
});
// 选择后自动关闭下拉
$(".date_picker").datepicker({
autoClose: true
});
API
- classes 自定义 className
- inline 是否一直可见
- false [default]
- language 指定 i18n 国际化语言
- ru [default]
- 可如上述在 input 中指定
data-language="zh"
- 也可以在插件初始化方法中通过
language: zh
指定
- startDate 初始化显示日期
- new Date() [default]
- firstDay 每周的开始时间
- 0-6 表示星期天到星期六
- 没有默认值,若不指定则根据引入的 i18n 规则决定,例如引入 zh ,则第一天为周一,引入 en ,则第一天为周日
- weekends 指定一组日期为周末
- [6, 0] [default]
- dateFormat 日期格式
- 没有默认值,若不指定则根据引入的 i18n 规则决定
- keyboardNav 是否允许键盘操作
- true [default]
- position 日期选择器相对于输入框的显示位置
- bottom left [default]
- offset 位置偏移值
- 12 [default]
- view 默认视图
- days [default]
- 可选 days months years
- minView 最小视图
- days [default]
- 可选 days months years
- minDate 可被选择的最小日期
minDate: new Date()
表示今天之前的日期都不可被选中
- maxDate 可被选择的最大日期
- disableNavWhenOutOfRange 可选范围之外的日期是否禁止查看
- true [default]
- multipleDates 是否可选择多个日期
- false [default]
- multipleDatesSeparator 自定义多个日期之间的分隔符
- , [default]
- range 允许选择日期范围
- false [default]
- 无法与 multipleDates 同时使用
- todayButton 是否显示[今天]按钮
- false [default]
- 点击按钮不会直接选择当前日期,只会跳转到当前日期所在的视图页
- clearButton 是否显示[清除]按钮
- false [default]
- autoClose 选择日期后,自动关闭面板
- false [default]
- timepicker 是否开启时间选择器
- false [default]
- timeFormat 时间格式
- 没有默认值,若不指定则根据引入的 i18n 规则决定
- minHours 小时数最小值
- 0 [default]
- 可选范围 0-23
- maxHours 小时数最大值
- 23 [default]
- 可选范围 0-23
- minMinutes 分钟数最小值
- 0 [default]
- 可选范围 0-59
- maxMinutes 分钟数最大值
- 59 [default]
- 可选范围 0-59
- hoursStep 小时的滑动间隔
- 1 [default]
- minutesStep 分钟的滑动间隔
- 1 [default]