Bootstrap中的datetimepicker用法總結

bootstrap時間控件參考文檔（少走彎路）

https://blog.csdn.net/hizzyzzh/article/details/51212867#31-format-%E6%A0%BC%E5%BC%8F

需要引入的js和css文件：

https://files.cnblogs.com/files/likui-bookHouse/datetimepicker.rar

 

 

支持選擇時分秒的時間控件

html代碼：

<div class="form-group col-xs-6">
                <label class="col-xs-1 control-label">下發時間</label>
                <div class="col-xs-3" style="width:205px;">
                    <div class="controls input-group">
　　　　　　　　　　　　　　//@ViewBag.BeginDate 加載頁面默認顯示的時間點    
                        <span id="beginDateCtl" class="input-group date form_date" data-date="@ViewBag.BeginDate" data-date-format="yyyy-mm-dd hh:i:ss" data-link-format="yyyy-mm-dd hh:i:ss" data-link-field="begintime">
                            <input class="form-control" id="searchBeginDate" style="width:160px" type="text" value="@ViewBag.BeginDate">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                        </span>
                    </div>
                </div>
                <label class="col-xs-1 control-label" style="width:30px;text-align:center;">---</label>

                <div class="col-xs-3">
                    <div class="controls input-group">
                        <span id="endDateCtl" class="input-group date form_date" data-date="@ViewBag.EndDate" data-date-format="yyyy-mm-dd hh:i:ss" data-link-format="yyyy-mm-dd hh:i:ss" data-link-field="endtime">
                            <input class="form-control" id="searchEndDate" style="width:160px" type="text" value="@ViewBag.EndDate">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                        </span>
                    </div>
                </div>
            </div>

data-date-format="yyyy-mm-dd hh:i:ss" 時間格式化爲24小時制      "yyyy-mm-dd HH:i:ss"爲12小時制

 

JS代碼：

var date = new Date();
$(function () {
    $('.form_date').datetimepicker({
        language: 'zh-CN',
        CustomFormat: 'yyyy-mm-dd HH:mm:ss',
        weekStart: 1,
        todayBtn: 1,            //顯示當天按鈕，點擊則選擇當天當天時間
        autoclose: 1,           //選完時間自動關閉
        todayHighlight: 1,      //當天時間高亮
        startView: 2,           //從月視圖開始，選天
        minView: 0,             //提供選擇分鐘的視圖
        forceParse: 0,      
　　　　　startDate: date，       //只能選當前時間之後的時間
        minuteStep: 1           //用於構建小時視圖。就是最小的視圖是每1分鐘可選一次。是以分鐘爲單位的
    });
    $("[data-toggle='popover']").popover();
    //結束時間必須大於開始時間，否則結束時間清空
    $('#beginDateCtl').on('changeDate', function (ev) {
        $('#endDateCtl').datetimepicker('setStartDate', ev.date);
        var d = $('#searchEndDate').val();
        if (d) {
            var date = new Date(d.replace(/-/g, '/'));
            if (date != 'Invalid Date' && date < ev.date) {
                $('#searchEndDate').val("");
            }
        }
    });
   

})