您的位置：首页 > Web前端 > BootStrap

bootstrap-datetimepicker 的使用

2014-08-18 17:32 369 查看

   在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）带有日期和时间的实例，截图如下所示：

相应的代码如下：

[html]
view plaincopy

<!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”这种格式的，当然我们也可以转化成别的格式：

格式名称	展示效果	属性设置
日期加时间	2014-01-23 11:10:12	format: 'yyyy-MM-dd hh:mm:ss', language: 'en', pickDate: true, pickTime: true, hourStep: 1, minuteStep: 15, secondStep: 30, inputMask: true
日期加时间（12小时制）	2014-01-23 23:13:52 PM	format: 'yyyy-MM-dd HH:mm:ss PP', language: 'en', pickDate: true, pickTime: true, hourStep: 1, minuteStep: 15, secondStep: 30, inputMask: true, pick12HourFormat: true
只显示时间	23:13:52	format: 'hh:mm:ss', language: 'en', pickDate: false, pickTime: true,
只显示日期	2014-01-23	format: 'yyyy-MM-dd', language: 'en', pickDate: true, pickTime: false

（2）上面插件展示的都是显示的中文，其实我们可以通过配置文件来扩展成中文格式的。

打开bootstrap-datetimepicker.min.js找到

[html]
view plaincopy

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","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]},ch:{days:["星期天","星期一","星期二","星期三","星期四","星期五","星期六","星期天"],daysShort:["周日","周一","周二","周三","周四","周五","周六","周天"],daysMin:["周日","周一","周二","周三","周四","周五","周六","Su"],months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],monthsShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]}};

页面中的配置如下即可

[javascript]
view plaincopy

        format: 'yyyy-MM-dd hh:mm:ss',
        language: 'ch',
        pickDate: true,
        pickTime: true,
        hourStep: 1,
        minuteStep: 15,
        secondStep: 30,
        inputMask: true

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航