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

bootstrap-datepicker日期范围限制失效:无法限制选中日期前后12个月

解决Bootstrap Datepicker日期范围不生效问题

你的问题出在startDate和endDate的取值逻辑上——当前代码里的'-365d'和'+365d'是相对于当前系统日期的范围,而非基于你预设选中的日期。这就导致不管预设日期是哪天,可选范围始终以今天为基准计算,自然会出现能选到超出预设日期范围的情况。

要实现「仅能选择预设选中日期前后12个月内的日期」,需先获取预设日期,再基于该日期计算范围:

// 获取输入框中预设的选中日期
const presetDate = new Date($('#can_edit_doj').val());

// 计算预设日期往前推12个月的起始日期
const startDate = new Date(presetDate);
startDate.setMonth(startDate.getMonth() - 12);

// 计算预设日期往后推12个月的结束日期
const endDate = new Date(presetDate);
endDate.setMonth(endDate.getMonth() + 12);

// 初始化日期选择器
$('#can_edit_doj').datepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    startDate: startDate,
    endDate: endDate
});

补充说明

  • 若要严格按「前后365天」而非12个月计算,可把setMonth替换为setDate,比如startDate.setDate(startDate.getDate() - 365)
  • 确保预设日期的格式与format配置完全匹配,否则new Date()可能无法正确解析日期
  • 若预设日期是后端渲染到输入框的,需确保页面加载时输入框已有值,再执行上述初始化代码

内容的提问来源于stack exchange,提问作者Kannan Raju

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.03 07:41:23