bootstrap-datetimepicker時間日期範圍選取元件使用說明及簡單教程
目前有兩個時間日期選擇模組可以使用。
bootstrap-datetimepicker
專案地址： ofollow,noindex" target="_blank" href="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
<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") 可檢視所有的功能：
- allowInputToggle: ƒ (a)
- calendarWeeks: ƒ (a)
- clear: ƒ ()
- collapse: ƒ (a)
- date: ƒ (a)
- datepickerInput: ƒ (a)
- dayViewHeaderFormat: ƒ (a)
- daysOfWeekDisabled: ƒ (a)
- debug: ƒ (a)
- defaultDate: ƒ (a)
- destroy: ƒ ()
- disable: ƒ ()
- disabledDates: ƒ (b)
- disabledHours: ƒ (b)
- disabledTimeIntervals: ƒ (b)
- enable: ƒ ()
- enabledDates: ƒ (b)
- enabledHours: ƒ (b)
- extraFormats: ƒ (a)
- focusOnShow: ƒ (a)
- format: ƒ (a)
- getMoment: ƒ (a)
- hide: ƒ ()
- icons: ƒ (b)
- ignoreReadonly: ƒ (a)
- inline: ƒ (a)
- keepInvalid: ƒ (a)
- keepOpen: ƒ (a)
- keyBinds: ƒ (a)
- locale: ƒ (a)
- maxDate: ƒ (a)
- minDate: ƒ (a)
- options: ƒ (b)
- parseInputDate: ƒ (a)
- show: ƒ ()
- showClear: ƒ (a)
- showClose: ƒ (a)
- showTodayButton: ƒ (a)
- sideBySide: ƒ (a)
- stepping: ƒ (a)
- timeZone: ƒ (a)
- toggle: ƒ ()
- toolbarPlacement: ƒ (a)
- tooltips: ƒ (b)
- useCurrent: ƒ (a)
- useStrict: ƒ (a)
- viewDate: ƒ (a)
- viewMode: ƒ (a)
- widgetParent: ƒ (b)
- 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。有完整的翻譯檔案可用。