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。有完整的翻译文件可用。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章