Bootstrap 时间控件 datetimepicker

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

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

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


js文件:



basePath定义:


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

<%--日期-时间选择-html--%>
<%--日期-时间选择-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")//控件显示位置 });

页面展示如下:
Bootstrap 时间控件 datetimepicker_第1张图片
Bootstrap 时间控件 datetimepicker_第2张图片

只对时间控件的引用:

<%--时间选择-html--%>
~
<%--时间选择-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。

页面展示如下:
Bootstrap 时间控件 datetimepicker_第3张图片
Bootstrap 时间控件 datetimepicker_第4张图片
该配置从小时开始选择,向上选择年月日是不可以的,因为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_第5张图片
保存后,数据库中存储的结果如下,秒的部分是设置的默认值:
Bootstrap 时间控件 datetimepicker_第6张图片

你可能感兴趣的:(Web页面开发总结)