jquery - 插件 - 日历时间选择

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 自定义 classNameinline 是否一直可见 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 yearsminView 最小视图 days [default]可选 days months yearsminDate 可被选择的最小日期 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-23maxHours 小时数最大值 23 [default]可选范围 0-23minMinutes 分钟数最小值 0 [default]可选范围 0-59maxMinutes 分钟数最大值 59 [default]可选范围 0-59hoursStep 小时的滑动间隔 1 [default]minutesStep 分钟的滑动间隔 1 [default]