You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.23 20:06:00