bootstrap-datetimepicker插件,实现日期选择功能

621 阅读1分钟

第一步:引入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();

 

 

效果

 

 

www.jianshu.com/p/f5464d0a5… www.malot.fr/bootstrap-d…