Eonasdan bootstrap datetimepicker 使用记录

2018-01-11 12:50:16来源:http://www.cnblogs.com/dudu/p/8252576.html作者:博客园-dudu人点击

分享


开始用的 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 tohttps://github.com/tempusdominus/bootstrap-3


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台