Bootstrap 时间控件 datetimepicker

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

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

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

<link rel="stylesheet" type="text/css" href="${basePath}/resources/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>

js文件：

<script src="${basePath}/resources/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="${basePath}/resources/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

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")//控件显示位置
});

页面展示如下：

只对时间控件的引用：

<%--时间选择-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, //分钟显示的间隔是1pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left")//控件显示位置});

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

页面展示如下：

该配置从小时开始选择，向上选择年月日是不可以的，因为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类型，专用于存储时间，选择时间后的结果如下：

保存后，数据库中存储的结果如下，秒的部分是设置的默认值：

Bootstrap 时间控件 datetimepicker相关推荐

angularjs 整合bootstrap 时间控件
一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...
bootstrap 时间控件
最近使用了bootstrap的UI感觉确实很漂亮,非常值得学习和使用.下面先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是非常的简单,只需要引入基本的css和js就可以了需要引入 ...
c# winform时间控件dateTimePicker增加清空日期功能
显示时间控件的复选框,当复选框取消勾选时,显示时间.当复选框取消勾选时,不显示时间 this.dateTimePicker1.CustomFormat = "yyyy-MM-dd" ...
记修改ElementUI的时间控件DateTimePicker样式踩坑日记
前言需求是这样的,时间只能选择之后的时间,并且日期时间只要求精确到小时,也就是不用选分钟和小时.根据ElementUI的代码复制粘贴过来. <el-date-pickerv-model=&qu ...
bootstrap时间控件
看一下效果首先新建一个html ,引入相应的js,附件里面有! <script type="text/javascript" src="./jquery/jque ...
bootstrap时间控件--时间选择器
对应上面的三个时间选择器,写法如下: 首先引入css和js: <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/boots ...
bootstrap-datetimepicker时间控件
bootstrap-datetimepicker时间控件使用layui的laydate时间控件无法很好地嵌入到bootstap布局中(具体参考日期和时间组件文档 - layui.laydate),因 ...
bootstrap日期时间控件
datetime控件 Bootstrap的日期时间控件,使用非常的简单. 首先,添加日期时间控件的引用 @*datetime控件*@<link href="~/Content/Boot ...
C# DateTimePicker：日期时间控件
日期时间控件(DateTimePicker)在时间控件中的应用最多,主要用于在界面上显示当前的时间. Format 属性提供了 4 个属性值,如下所示. Short:短日期格式,例如2017/3/1: ...
datetimepicker 时间控件 1899年问题以及解决方法
datetimepicker 时间控件 1899年问题以及解决方法参考文章: (1)datetimepicker 时间控件 1899年问题以及解决方法 (2)https://www.cnblogs. ...

Bootstrap 时间控件 datetimepicker

Bootstrap 时间控件 datetimepicker相关推荐

最新文章

热门文章