Bootstrap4 DatePicker禁用小时选择并固定默认时间为09:00AM实现问询
解决方案
- 实现思路:官方未提供固定时间部分的配置项,可通过监听日期选择器的变更事件,强制每次选完日期后把时间部分替换为固定的
09:00,配合你已实现的小时选择器禁用逻辑,即可完全锁死时间部分。 - HTML代码无需调整,保持原有写法即可:
<input class="form-control" id="date_start_picker">
- 修改后的初始化JS代码如下:
function initDatePicker(id_picker, date, id_other_picker, is_first_picker = true, format = 'yyyy-mm-dd HH:mm') { let this_object = this var datePicker = $(id_picker) // 处理初始化默认值,若传入的日期没有时间部分则自动补09:00 if (date && date.trim().length === 10) { date = date + ' 09:00' } datePicker.datepicker({ uiLibrary: 'bootstrap4', modal: false, footer: false, value: date, format: format, minDate: "2000-01-01", // 监听日期变更事件,强制替换时间为09:00 change: function (e) { const selectedVal = $(this).val() if (selectedVal) { const datePart = selectedVal.split(' ')[0] const finalVal = datePart + ' 09:00' // 同时更新输入框展示值和datepicker内部缓存值 $(this).val(finalVal) datePicker.datepicker('value', finalVal) } } }); }
补充备选方案:如果不需要在输入框中展示时间部分,可以直接将format参数改为
'yyyy-mm-dd',表单提交时统一给日期拼接09:00再传给后端,实现逻辑更简洁。
内容的提问来源于stack exchange,提问作者Royal
相关产品推荐
相关产品推荐

