bootstrap-datetimepicker 的使用
???? ? ?? 在web开发中,难免会用到时间选择控件,也正好也在使用bootstrap,所以就找到了bootstrap-datetimepicker 这个插件,下面把这个插件的使用记录一下,以做备忘。 1、前期准备(以下文件在下载的附件中已经下载,如果不想下载,可以下载附件即可) ????????? bootstrap-combined.min.css ????????? bootstrap-datetimepicker.min.css ????????? jquery.min.js ????????? bootstrap.min.js ????????? bootstrap-datetimepicker.min.js ????????? glyphicons-halflings.png ? 2、使用方法 ??????? (1)带有日期和时间的实例,截图如下所示: ????????? ????? 相应的代码如下: ??? <!DOCTYPE HTML> <html> <head> <link href="css/bootstrap-combined.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-datetimepicker.min.css"> </head> <body> <div id="datetimepicker" class="input-append date"> <input type="text" name="time" id="time"></input> <span class="add-on"> <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> </span> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript"> $('#datetimepicker').datetimepicker({ format: 'MM/dd/yyyy hh:mm',language: 'en',pickDate: true,pickTime: true,hourStep: 1,minuteStep: 15,secondStep: 30,inputMask: true }); </script> </body> <html> 控件的操作也比较简单,点击顶部的年月或底部的时间区域,会进入相应的选择界面,比较方便使用,具体使用方法就不再详细描述了。 从图例中我们可以看到,日期显示的格式是“MM/dd/yyyy hh:mm”这种格式的,当然我们也可以转化成别的格式:
?? (2)上面插件展示的都是显示的中文,其实我们可以通过配置文件来扩展成中文格式的。 打开bootstrap-datetimepicker.min.js找到 var dates=$.fn.datetimepicker.dates={en:{days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],daysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"],daysMin:["Su","Mo","Tu","We","Th","Fr","Sa","Su"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}}}; 目前的解决办法是在该配置文件中添加一个中文的配置,修改后的片断如下图所示 var dates=$.fn.datetimepicker.dates={en:{days:["Sunday","Dec"]},ch:{days:["星期天","星期一","星期二","星期三","星期四","星期五","星期六","星期天"],daysShort:["周日","周一","周二","周三","周四","周五","周六","周天"],daysMin:["周日",months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],monthsShort:["一月","十二月"]}}; 页面中的配置如下即可 ? ? ? ? format: 'yyyy-MM-dd hh:mm:ss',language: 'ch',inputMask: true 实例下载地址: ?????? http://download.csdn.net/detail/xiaofenglu/6876861 参照地址: ??????? http://tarruda.github.io/bootstrap-datetimepicker/ ??????? http://www.open-open.com/lib/view/open1356568521682.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |