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
相关产品推荐
相关产品推荐

