bootstrap(可以快速搭建前端页面的css库,但又不单单是一个库,还有许多组件和插件),日期时间选择器是bootstrap日期和时间表单组件。
使用bootstrap-datetimepicker时间插件css需要引入:
.../css/bootstrap/bootstrap.min.css
../css/bootstrap/bootstrap-datetimepicker.min.css
js需要引入:
../js/jquery-1.11.1.min.js
.../js/bootstrap/bootstrap.min.js
.../js/bootstrap/bootstrap-datetimepicker.min.js
如果用汉化的时间格式,需要引入:
.../js/locales/bootstrap-datetimepicker.zh-CN.js
页面引用:
插件提供了一个datetimepicker({})方法,相当于JQuery的点击时间;只需在页面添加一个表单的文本输入框
<input type="text" name="startTime" class="form-control" readonly></td>
获取该输入框JQuery对象,调用该方法,相当于给输入框绑定了点击时间。
$("input[name='startTime']").datetimepicker({
minView : "day", // 选择时间时,最小可以选择到那层;默认是‘hour’也可用0表示
language : 'zh-CN', // 语言
autoclose : true, // true:选择时间后窗口自动关闭
format : 'yyyy-mm-dd hh:00:00', // 文本框时间格式,设置为0,最后时间格式为2017-03-23 17:00:00
todayBtn : true, // 如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。
startDate : new Date() , // 窗口可选时间从今天开始
endDate : new Date() // 窗口最大时间直至今天
})
一般几个属性就够用了。更多属性,请转datetimepicker官方帮助文档
** 今天遇到个问题:**
在火狐中弹出层<select>下拉失效。在谷歌中正常。后来百度了下:
去掉页面<div>中的:tabindex="-1" role="dialog"属性就好了。