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" >
                    <div class="controls input-group">
//@ViewBag.BeginDate 加载页面默认显示的时间点 <span 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" 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" >---</label> <div class="col-xs-3"> <div class="controls input-group"> <span 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" 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(""); } } }); })