bootstrap-datetimepicker时间日期范围选取组件使用说明及简单教程

目前有两个时间日期选择模块可以使用。

 

bootstrap-datetimepicker

 

项目地址： https://github.com/Eonasdan/bootstrap-datetimepicker

 

特点是可以选择日期和时间。

 

安装js/css

 

从git上下载完整的zip包，找到以下这两个文件放到项目中，此项目依赖moment的翻译和日期格式化，所以可以加上 moment-with-locales.min.js 的引用： https://github.com/moment/moment

 

<link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="/js/moment-with-locales.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>

 

使用

 

使用中文的日历，并且只可选择日期，此时可设置 format 为 YYYY-MM-DD，具体格式可查看 moment 的日期格式设置：
 

  $(selector).datetimepicker({

      locale: 'zh-CN'

    , format: "YYYY-MM-DD"

  })

示例

 

<div class="input-group">

  <label class="input-group-addon">开始时间</label>

  <input type="text" class="form-control" data-datetime-picker="YYYY-MM-DD" id="datetime-start">

  <span class="input-group-addon">

    <i class="glyphicon glyphicon-calendar"></i>

  </span>

 

  <span class="input-group-addon">结束时间</span>

  input type="text" class="form-control" data-datetime-picker="YYYY-MM-DD" id="datetime-stop">

  <span class="input-group-addon">

    <i class="glyphicon glyphicon-calendar"></i>

  </span>

</div>

 

绑定代码，使用统一的绑定代码：

 

$('[data-datetime-picker]').each(function() {

  var $this   = $(this)

  var format  = $this.attr('data-datetime-picker')

 

  $this.datetimepicker({

      locale: 'zh-CN'

    , format: format

  })

})

效果：

手动触发

针对上面的示例，可使用代码手动弹出日期选择器：
 

$('#datetime-start').data("DateTimePicker").show()

打印 data("DateTimePicker") 可查看所有的功能：
 

1. allowInputToggle: ƒ (a)
2. calendarWeeks: ƒ (a)
3. clear: ƒ ()
4. collapse: ƒ (a)
5. date: ƒ (a)
6. datepickerInput: ƒ (a)
7. dayViewHeaderFormat: ƒ (a)
8. daysOfWeekDisabled: ƒ (a)
9. debug: ƒ (a)
10. defaultDate: ƒ (a)
11. destroy: ƒ ()
12. disable: ƒ ()
13. disabledDates: ƒ (b)
14. disabledHours: ƒ (b)
15. disabledTimeIntervals: ƒ (b)
16. enable: ƒ ()
17. enabledDates: ƒ (b)
18. enabledHours: ƒ (b)
19. extraFormats: ƒ (a)
20. focusOnShow: ƒ (a)
21. format: ƒ (a)
22. getMoment: ƒ (a)
23. hide: ƒ ()
24. icons: ƒ (b)
25. ignoreReadonly: ƒ (a)
26. inline: ƒ (a)
27. keepInvalid: ƒ (a)
28. keepOpen: ƒ (a)
29. keyBinds: ƒ (a)
30. locale: ƒ (a)
31. maxDate: ƒ (a)
32. minDate: ƒ (a)
33. options: ƒ (b)
34. parseInputDate: ƒ (a)
35. show: ƒ ()
36. showClear: ƒ (a)
37. showClose: ƒ (a)
38. showTodayButton: ƒ (a)
39. sideBySide: ƒ (a)
40. stepping: ƒ (a)
41. timeZone: ƒ (a)
42. toggle: ƒ ()
43. toolbarPlacement: ƒ (a)
44. tooltips: ƒ (b)
45. useCurrent: ƒ (a)
46. useStrict: ƒ (a)
47. viewDate: ƒ (a)
48. viewMode: ƒ (a)
49. widgetParent: ƒ (b)
50. widgetPositioning: ƒ (b)

 

bootstrap-datepicker

 

项目地址： https://github.com/uxsolutions/bootstrap-datepicker

 

特点是只能选择日期，从代码风格上看应该是 bootstrap-datetimepicker 的源项目，有比较完整的翻译文件。

 

 

bootstrap-datetimepicker

 

项目地址： https://github.com/smalot/bootstrap-datetimepicker

 

这个项目是基于 bootstrap-datepicker 扩展而来的，增加了 time 的支持。目前已经停止维护，不过代码仍然可用，支持Bootstrap 2.x/Bootstrap 3.x。有完整的翻译文件可用。