第一步:引入css和js文件
到这里下载静态资源包,需要用到里面的3个文件,然后引入 。
<%-- css文件 --%>
<link rel="stylesheet" href="/static/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
<%-- js文件 --%>
<script src="/static/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>
第二步:添加jQuery代码用于回显
$('#my_test').datetimepicker({
minView : "hour", // 选择时间时,最小可以选择到什么程度;默认是‘hour’
language : 'zh-CN', // 语言。需要上面那个js语言包
autoclose : true, // true:选择时间后窗口自动关闭
format : 'yyyy-mm-dd hh:ii:ss', // 文本框时间格式:年月日时分秒
todayBtn : true, // 在日期时间选择器组件的底部显示一个"Today"按钮用以选择当前日期。
todayHighlight : true, // "Today"按钮高亮
todayHighlight : true, // 是否允许通过方向键改变日期。
// startDate : new Date() , // 可选的最小时间为今天
// endDate : new Date() // 可选的最大时间为今天
})
常用的属性看注释内容即可。
第三步:设置控件
<input type="text" id="my_test" class="form-control" readonly></td>
一行即可。id用于回显(选中后在控件上显示选择的内容),另外用于后期获取页面上该input标签的值来提交表单。readonly的作用是只允许通过该插件来选择时间,不允许键盘输入来更改。
表单提交时获取值的方法
var my_test = $("#my_test").val();
效果