Bootstrap日期控件-datetimepicker

1. 前言

在前端有时需要日期控件，我使用较多的是Bootstrap日期控件-datetimepicker。中间也遇到了一些问题，所以来记录下。

2. 代码

1. 首先是引入js和css文件
   
   • 首先是bootstrap的js文件bootstrap.js。
   • 然后是datetimepicker的js文件bootstrap-datetimepicker.js。以及汉化文件bootstrap-datetimepicker.zh-CN.js。
   • 使用bootstrap必须引入jquery，jquery.min.js。
   • 最后是css样式的引入，bootstrap.css和bootstrap-datetimepicker.css。
2. 页面加入日期标签
   由于我的设计到计算开始日期和结束日期的间隔时间，所以页面中有两个时间标签。

<input class="form_datetime form-control" type="text" value="" id="startConsignedTm" name="startConsignedTm" placeholder="开始时间">
<input class="form_datetime form-control" type="text" value="" id="endConsignedTm" name="endConsignedTm" placeholder="结束时间">

1. 页面加入日期标签

function addDate(){
    $(".form_datetime").each(function() {
        $(this).datetimepicker({
            format: "yyyy-mm-dd",
            autoclose: true,
            todayBtn: true,
            todayHighlight: true,
            showMeridian: true,
            pickerPosition: "bottom-left",
            language: 'zh-CN',
            startView: 2,
            minView: 2
        });  
    });

}

有时你会发现你的日期控件并没有生效，这是因为你需要在标签加载完后再加载js，我的做法是在需要日期的时候主动调用addDate函数。
你可以根据自己的需要，调整日期显示的效果，比如
- format是设值日期格式的，我这里设值的是yyyy-mm-dd，还有yyyy-mm-dd hh:ii，yyyy-mm-ddThh:ii，yyyy-mm-dd hh:ii:ss等。
- autoclose，选中一个日期后是否关闭日期选择器。
- startView，打开后显示的样式，有0-5个整数可选，0为小时，我们这里选择的是2，月。
- minView，同startView。
还有其他的参数，就不说明了。

附加：有时我们需要算出两个日期的时间间隔，比如天数。

function diffTime(startDate, endDate) {
    var d1 =  startDate.split("-");
    var d2 =  endDate.split("-");
    var s1 = new Date(parseInt(d1[0]),parseInt(d1[1])-1,parseInt(d1[2]));
    var s2 = new Date(parseInt(d2[0]),parseInt(d2[1])-1,parseInt(d2[2]));
    var time = s2.getTime() - s1.getTime();
    var days = Math.floor(time / (24 * 60 * 60 * 1000));
    return days;
}