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

使用

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

$(selector).datetimepicker({

locale: zh-CN

, format: "YYYY-MM-DD"

})

示例

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

$([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。提供完整的翻译文件。