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:ii: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("");
            }
        }
    });
   

})