Bootstrap timerangepicker 24hour 无法正常显示

最近使用timerangepicker,按照timerangepicker的文档说明,设置了timepicker24hour,展示的时候还是12小时,只不过没有了AM/PM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
singleDatePicker: true,
timePicker: true,
timePicker24Hour: true,
locale: {
format: 'YYYY-MM-DD hh:mm',
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '起始时间',
toLabel: '结束时间',
customRangeLabel: '自定义',
daysOfWeek: [ '日', '一', '二', '三', '四', '五', '六' ],
monthNames: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ],
firstDay: 1
},
dateLimit: {
days: 1
}
}

后来用一些hack的方式,算是实现了。

可总感觉那里有问题,既然timerangepicker本身支持24hour,那就应该可以显示的。既然说明文档里找不到,就只能看代码了…

打开源代码文件,我在更新input的value哪里输出了一些日志,并未找到问题。纠结了一段时间后,我发现,日期的格式化是通过moment来处理的。随即,我意识到找到了解决问题的方向,打开moment官网,在文档中有一处说明(String + Format )里,找到了答案:

Input Example Description
H HH 0..23 Hours (24 hour time)
h hh 1..12 Hours (12 hour time used with a A.)
k kk 1..12 Hours (24 hour time from 1 to 24)

好吧,hh->HH 让我折腾了几个小时,以后要吸取教训了。

吐槽: timerangepicker的文档真是坑啊,压根没有提到这一点…

注: bootstrap对于时间的处理使用的都是moment