datetimepicker（使用/汉化）-- Bootstrap日期和时间表单组件

参考 https://www.bootcss.com/p/bootstrap-datetimepicker/ 可以下载资源，也有示例。

1、个人对插件参数的梳理，因为源地址的排版不好查阅。

2、会提供一种用法。

3、因为此插件是基于bootstrap，最后也会在注意事项中写一些在应用中的各种样式或需求的具体实现。

视图对应参数 -- 0分钟 1小时 2天 3月 4年

天对应参数 -- 0日 1 2 3 4 5 6

示例

<input id="beginTime" type="datetime" readonly>

$("#beginTime").datetimepicker({
      format: 'yyyy-mm-dd hh:ii:ss',
      language: 'zh-CN',
      startView: 2,
      endDate: new Date(),
      maxView:3,
      minuteStep:5,
      todayBtn: true,
      keyboardNavigation: true,
      autoclose: true
});

常用参数

参数默认值解析

format：        yyyy-mm-dd hh:ii yyyy-mm-dd hh:ii:ss

weekStart：      0(周日) 一周从哪一天开始

startDate：                   开始时间

endDate：    结束时间

autoclose：     false             当选择一个日期之后是否立即关闭此日期时间选择器。

startView：      2(month)        0小时 1天（默认） 2月 3年 4年

minView：       0(hour)          日期时间选择器所能够提供的最精确的时间选择视图

maxView：    4(decade)       日期时间选择器最高能展示的选择范围视图

todayBtn：    false 如果此值为true,显示一个按钮用以选择当前日期。

todayHighlight： false           如果为true, 高亮当前日期。

language

forceParse：是否按照给定的格式format设置到输入框中

minuteStep： 5 分钟视图的步进。

keyboardNavigation: true 是否允许通过方向键改变日期。(键盘方向键)

daysOfWeekDisabled

方法

$().datetimepicker(options)

options=

remove    无参    移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。

show 无参    显示日期时间选择器。

hide      无参

update     无参使用当前输入框中的值更新日期时间选择器。

setStartDate '2012-01-01' 给日期时间选择器设置一个新的起始日期。

setEndDate new Date()    给日期时间选择器设置结束日期。

setDaysOfWeekDisabled [0,6] 不显示的天

事件

.on('changeDate', function(ev){

});

show 当选择器显示时被触发。

hide 当选择器隐藏时被触发。

changeDate 当日期被改变时被触发。

changeYear 当十年视图（选择年的视图）上的年视图view被改变时触发。

changeMonth 当年视图（选择月的视图）上的月视图view被改变时触发。

outOfRange 当用户选择的日期超出startDate 或endDate 时，或者通过setDate 或 setUTCDate方法设置日期超出范围时被触发。

国际化

这里可以自定义，需要在渲染datetimepicker之间定义

$.fn.datetimepicker.dates['zh-CN'] = {
      days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
      daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
      months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      today: "今天",
      suffix: [],
      meridiem: ["上午", "下午"]
};

应用

开始-结束时间

datetime-half 需要在 form-group中生效

<div class="form-group">
     <input name="beginTime" id="beginTime" type="datetime" class="form-control datetime-half" readonly>
     <span class="input-center-span">-</span>
     <input name="endTime" id="endTime" type="datetime" class="form-control datetime-half pull-right"
</div>

$("#beginTime, #endTime").datetimepicker({
      format: 'yyyy-mm-dd hh:ii:ss',
      language: 'zh-CN',
      startView: 2,
      endDate: new Date(),
      maxView:3,
      minuteStep:5,
      todayBtn: true,
      autoclose: true,
      keyboardNavigation: false
});

//当日期改变时需要设置另一个的限制

$("#beginTime").datetimepicker().on('changeDate', function(ev) {
       var startTime = ev.date.getTime();
      $('#endTime').datetimepicker('setStartDate', new Date(startTime));
});
$("#endTime").datetimepicker().on('changeDate', function(ev) {
      var endTime = ev.date.getTime();
      $('#beginTime').datetimepicker('setEndDate', new Date(endTime));
});

开始-结束时间

如果需要在初始化中设置时间

这里需要先给date加一个方法，格式化一下date对象

/*  Date格式转换 yyyy-MM-dd hh:mm:ss.S
*   author: meizz
*   URL:https://blog.csdn.net/meizz/article/details/405708
*   对Date的扩展，将 Date 转化为指定格式的String
*   月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
*   年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
*   例子：
*   (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
*   (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
*/
Date.prototype.Format = function(fmt) {
var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
       "h+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
       if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ?
      (o[k]) :
      (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
}

当然你也可以用date原生的getMonth。。。来拼接

$("#beginTime").val(new Date().Format("yyyy-MM-dd 00:00:00"))
//需要给结束时间input 设置开始时间限制
$('#endTime').datetimepicker('setStartDate', new Date().Format("yyyy-MM-dd 00:00:00"));
$("#endTime").val(new Date().Format("yyyy-MM-dd hh:mm:ss"))