Eonasdan bootstrap datetimepicker 使用記錄

dudu發表於2018-01-10
boot

開始用的 bootstrap日期選擇控制元件是 bootstrap-datepicker ：

$('#visit_date').datepicker({
    todayHighlight: true,
    startDate: '+1d',
    format: 'yyyy/mm/dd',
    language: 'zh-CN',
    orientation: 'bottom right',
    autoclose: 'true' 
});

後來需要支援時間選擇，改用了 eonasdan-bootstrap-datetimepicker ：

$('#visit_date').datetimepicker({
    locale: 'zh-CN',
    minDate: moment().add(1, 'days').hours(9).startOf('hour'),
    format: 'YYYY/MM/DD hh:mm',        
    daysOfWeekDisabled: [1],
    reenabledDates: ['2018-04-30', '2018-06-18', '2018-09-24', '2018-10-01'],
    enabledHours: [9, 10, 11, 12, 13, 14, 15, 16, 17]
});

它是基於 momentjs 實現的。

locale 設定當前的語言。

minDate 設定允許選擇的最早時間，比如上面的示例設定為第2天早上9:00。

format 日期時間格式（就是 momentjs 支援的格式），比如上面的示例格式對應的時間是 2018/01/10 09:00 。

daysOfWeekDisabled 禁止選擇周幾，比如上面的示例禁止選擇週一。

enabledHours 限制可以選擇的時間，比如上面的示例只允許選擇 9:00 ~ 17:00 。

reenabledDates 是我修改原始碼實現的（詳見博問） ，允許選擇被 daysOfWeekDisabled 禁止的日期，在 github 上提交 pull request 時才發現 Eonasdan 已另起爐灶。

This repo is no longer actively monitor or supported. All future work is being done to https://github.com/tempusdominus/bootstrap-3 

相關文章