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

待我称王封你为后i 2023-06-12 09:45 333阅读 0赞

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

### bootstrap-datetimepicker ###

项目地址： [https://github.com/Eonasdan/bootstrap-datetimepicker][https_github.com_Eonasdan_bootstrap-datetimepicker]

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

**安装js/css**

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

**使用**

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

$(selector).datetimepicker(\{

locale: 'zh-CN'

, format: "YYYY-MM-DD"

\})

**示例**

</span>

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

</span>

</div>

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

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

var $this   = $(this)

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

$this.datetimepicker(\{

locale: 'zh-CN'

, format: format

\})

效果：  
![format_png][]

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

$('#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][https_github.com_uxsolutions_bootstrap-datepicker]

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

### bootstrap-datetimepicker ###

项目地址： [https://github.com/smalot/bootstrap-datetimepicker][https_github.com_smalot_bootstrap-datetimepicker]

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

[https_github.com_Eonasdan_bootstrap-datetimepicker]: https://github.com/Eonasdan/bootstrap-datetimepicker
[https_github.com_moment_moment]: https://github.com/moment/moment
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL25ld2dob3N0L3N0YXRpYy9naC1wYWdlcy9pbWFnZXMvZGF0ZXRpbWUtcGlja2VyLnBuZw?x-oss-process=image/format,png
[https_github.com_uxsolutions_bootstrap-datepicker]: https://github.com/uxsolutions/bootstrap-datepicker
[https_github.com_smalot_bootstrap-datetimepicker]: https://github.com/smalot/bootstrap-datetimepicker