时间选择框datepicker的使用

bootstrap框架中的一个重要内容，时间选择框datepicker。
如，想要实现选择从某天到某天的两个输入框：
在HTML中写如下内容

<div class="input-daterange date-picker input-group" id="datepicker">
    <input type="text" class="input-sm form-control" name="start" id="start-date" value=""/>
    <span class="input-group-addon">到</span>
    <input type="text" class="input-sm form-control" name="end" id="end-date" value=""/>
</div>

input-daterange是指一个输入一个时间范围，也就说需要有两个输入框，默认后一个框的时间必须大于前一个框的 date-picker就规定了里面的input是时间选择的框框，后面还可以加data-date-format="yyyy-mm-dd"来规定时间格式

在JS中写如下内容

/*
	 * 没有如下内容，输入框是不会弹出时间选择的框框的
	 * autoclose是自动关闭框框的意思
	 * 可以加属性language: "zh-CN",来规定语言为中文
	 */
    $('#data_5 .input-daterange').datepicker({
        keyboardNavigation: false,
        forceParse: false,
        autoclose: true
    });

    $('#data_6 .input-daterange').datepicker({
        keyboardNavigation: false,
        forceParse: false,
        autoclose: true
    });

还有在js中设置输入框中的时间

// 默认查询时间今天
    var curDate = new Date();
    var yearNow = curDate.getFullYear();
    var monthNow = curDate.getMonth();
    var dayNow = curDate.getDate();
    var curDateFormat = getFormatDate(yearNow, monthNow, dayNow);
    // 默认30天
    var preDate = new Date(curDate.getTime() - 30 * 24 * 60 * 60 * 1000); // 前30天
    var preDateFormat = getFormatDate(preDate.getFullYear(), preDate.getMonth(), preDate.getDate());
    // 日期初始化
    document.getElementById("start-date").value = preDateFormat;
    document.getElementById("end-date").value = curDateFormat;

如果只是想实现一个时间输入框
如下：

<input type="text" class="datepicker" placeholder="请选择日期" />

<script type="text/javascript">
    $(function () {
        $(".datepicker").datepicker({
            language: "zh-CN",
            autoclose: true,//选中之后自动隐藏日期选择框
            clearBtn: true,//清除按钮
            todayBtn: true,//今日按钮
            format: "yyyy-mm-dd"//日期格式
        });
    });
</script>

参考：
https://www.cnblogs.com/mymint/p/4512463.html