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

Bootstrap DatePicker如何禁用今日前日期并限制90天可选范围

问题根因

结束日期规则失效是代码存在3处语法/配置错误,额外还有资源加载、重复初始化的隐患:

  • 变量名不匹配:定义90天日期的变量名为todates,调用getDate()方法时错写为不存在的dates变量,直接触发JS运行错误
  • 非法数值写法:90D不是合法JS数值,日期偏移计算直接传整数90即可
  • 配置项拼写错误:Bootstrap Datepicker 控制最大可选日期的配置项为endDate,错写为endtDate会导致配置不生效
  • 资源/初始化问题:link标签缺失rel="stylesheet"属性会导致日期选择器样式加载失败;input标签上的data-provide="datepicker"属性会触发组件自动初始化,和后续手动写的JS初始化逻辑冲突,导致自定义配置不加载。
修复后实现代码
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"> 
</head>
<body>
  <label for="date">From:</label>
  <input id="date">
  <label for="todate">To:</label>
  <input id="todate">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>
<script>
// 初始化起始日期选择器:最小可选日期为当天
var today = new Date();
$('#date').datepicker({ 
    startDate: today,
    autoclose: true
});
// 初始化结束日期选择器:最大可选日期为当天起90天后
var maxToDate = new Date();
maxToDate.setDate(maxToDate.getDate() + 90);
$('#todate').datepicker({ 
    endDate: maxToDate,
    autoclose: true
});
</script>
</body>
</html>

补充优化:新增autoclose: true配置,选中日期后会自动关闭选择弹层,符合常规交互习惯。

内容的提问来源于stack exchange,提问作者Chinni Ch

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.28 00:18:15