Bootstrap 时间控件 datetimepicker

柔光的暖阳◎ 2022-05-21 00:44 1156阅读 0赞

Bootstrap 的时间控件易用且美观，下面将用法记录一下，大家有需要可以直接看官网的介绍，还是很基础的。  
网址：[http://www.bootcss.com/p/bootstrap-datetimepicker/][http_www.bootcss.com_p_bootstrap-datetimepicker]

Bootstrap有两种时间控件：datepicker 和 datetimepicker，后者是前者的拓展，增加了到时分秒的选择。下面是选用了 datetimepicker 的 写法：

首先需要引入相关的 css样式文件 和 js交互文件 ：  
css文件：

js文件：

basePath定义：

<c:set var="basePath" value="${pageContext.request.contextPath }"></c:set>

下面是对日期-时间控件的引用：

<%--日期-时间选择-html--%>
    <div class="form-group">
    	<label class="control-label col-md-3">交易时间</label>
    	<div class="col-md-4">
    		<input class="form-control input-inline input-sm form_datetime"
    			name="tradeTime" id="tradeTime" size="12" type="text" placeholder="交易时间"
    			data-date-format="yyyy-mm-dd HH:mm:SS"/>
    	</div>
    </div>
    
    <%--日期-时间选择-js--%>
    $(".form_datetime").datetimepicker({
    	autoclose: true,   //选择后自动关闭当前时间控件
    	isRTL: Metronic.isRTL(), //RTL：right to left（从右向左显示），默认为false，即：从左向右显示
    	format: "yyyy-mm-dd hh:ii:ss", //时间格式
    	pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left")//控件显示位置
    });

页面展示如下：  
![70][]  
![70 1][]

只对时间控件的引用：

<%--时间选择-html--%>
    <div class="form-group">
        <label class="control-label col-md-3"><span style="color:red">*</span>起止时间</label>
        <div class="col-md-8">
            <input type="text" name="startTimeStr" id="aou_startTimeStr" data-date-format="hh:ii:ss"
                   class="form-control input-inline form_time" placeholder="00:00:00"  readonly="readonly">
            ~
            <input type="text" name="endTimeStr" id="aou_endTimeStr" data-date-format="hh:ii:ss"
                   class="form-control input-inline form_time" placeholder="23:59:59" readonly="readonly">
        </div>
    </div>
    
    <%--时间选择-js--%>
    $(".form_time").datetimepicker({
    	autoclose: true,//选择后自动关闭当前时间控件
    	isRTL: Metronic.isRTL(), //从左向右显示
    	format: "hh:ii", //只选择到分钟
    	startView : 'day', //起始视图从天开始
    	maxView : 'day', //最大视图从天开始
    	minuteStep:1, //分钟显示的间隔是1
    	pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left")//控件显示位置
            });

上面的部分我想实现 起始时间是： 18:00:00 ， 截止时间是： 23:59:59 的选择，但是时间控件没法精确到秒，默认的秒是当前选择的时间的秒，所以我设计为：时间选择到分，后面秒的部分默认接 00 和 59。

页面展示如下：  
![70 2][]  
![70 3][]  
该配置从小时开始选择，向上选择年月日是不可以的，因为maxView是从day开始的。由于我调整了minuteStep=1，所以可选分钟的间隔是一分钟，默认是5分钟，如本文第二张图所示。

var startTime = $("#aou_startTimeStr").val();
    var endTime = $("#aou_endTimeStr").val();
    if(startTime >= endTime){
    	bootbox.alert({title: "提示信息", message: "起始时间必须小于截止时间！"});
    	return;
    }
    $("#aou_startTimeStr").val(startTime + ":00"); //起始时间的秒默认为00
    $("#aou_endTimeStr").val(endTime + ":59"); //截止时间的秒默认为59

数据库中，起始时间、截止时间对应的类型是time类型，专用于存储时间，选择时间后的结果如下：  
![70 4][]  
保存后，数据库中存储的结果如下，秒的部分是设置的默认值：  
![70 5][]

[http_www.bootcss.com_p_bootstrap-datetimepicker]: http://www.bootcss.com/p/bootstrap-datetimepicker/
[70]: /images/20220521/ec2642c5e78b44a0a1cf55ffc0506833.png
[70 1]: /images/20220521/d4e6f561624d45fd838d1cf0b864189f.png
[70 2]: /images/20220521/03b924fdbc334749b272895a6de172d9.png
[70 3]: /images/20220521/d10e9272b9dc418c939e63afde6dc5eb.png
[70 4]: /images/20220521/5b5fdf61a2e848f5a84e2486464920d4.png
[70 5]: /images/20220521/719ff3ec9a0c429fb11337c60a3234f9.png