Bootstrap時間選擇插件datetimepicker使用

導入相關插件

<link rel="stylesheet" href="/static/plugin/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<script src="{% static '/plugin/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static '/plugin/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>

相關body代碼

<div class="form-group">
    <label class="col-sm-3 control-label" for="classname">有效時間</label>
    <div class="col-sm-3">
        <input id="starttime" class="form-control" type="text" readonly placeholder="請選擇開始時間">
    </div>
    <div class="col-sm-3">
        <input id="endtime" class="form-control" type="text" readonly placeholder="請選擇結束時間">
    </div>
</div>

相關js代碼及解釋

$('#starttime').datetimepicker(
    {
        format: 'yyyy-mm-dd hh:ii:ss', // 顯示格式 精確到分
        autoclose: true, // 選完時間后，窗口自動關閉
        todayBtn: true, // 當天日期按鈕
        pickerPosition: "bottom-right", // 選擇框位置
        startDate: new Date(), //date之前的時間不能選
        daysOfWeekDisabled: [0, 6], // 一周的周六和周天不能選
        minView: 0, //時間精確度 [0-4]分-年
        todayHighlight: true, // 當天日期高亮
        language: 'zh-CN', // 顯示語言
        minuteStep: 5, // 最小的分鍾區間
        initialDate: true, // 默認時間
    });

$('#endtime').datetimepicker(
    {
        format: 'yyyy-mm-dd hh:ii:ss', // 顯示格式 精確到分
        autoclose: true, // 選完時間后，窗口自動關閉
        todayBtn: true, // 當天日期按鈕
        pickerPosition: "bottom-right", // 選擇框位置
        startDate: new Date(), //date之前的時間不能選
        daysOfWeekDisabled: [0, 6], // 一周的周六和周天不能選
        minView: 0, //時間精確度 [0-4]分-年
        todayHighlight: true, // 當天日期高亮
        language: 'zh-CN', // 顯示語言
        minuteStep: 5, // 最小的分鍾區間
        //showMeridian:true, // 是否顯示上下午
        initialDate: true, // 默認時間
    });