bootstrap datepicker设当前日期报Cannot read 'minDate' of undefined错误
错误产生原因
报错核心是混用了Bootstrap Datepicker和jQuery UI Datepicker的API,两者的调用逻辑、配置项命名完全不兼容,具体触发原因如下:
- 初始化时你使用的是Bootstrap Datepicker的别名实例化方法
bootstrapDP(),但后续赋值时调用了jQuery UI Datepicker的datepicker("setDate")方法,jQuery UI的datepicker实例从未被初始化过,自然找不到配置的minDate属性,触发读取undefined属性的报错。 - 额外配置错误:Bootstrap Datepicker限制日期范围的原生参数是
startDate和endDate,你写的minDate、maxDate是jQuery UI Datepicker的参数,就算调用方法正确,配置的日期限制规则也不会生效。
解决方案
统一使用Bootstrap Datepicker的API完成初始化和赋值操作即可,步骤如下:
- 修正初始化配置,替换为Bootstrap Datepicker支持的参数:
$('#ExpectedCloseDate').bootstrapDP({ format: 'dd/mm/yyyy', autoclose: true, startDate: "0", // 等效原minDate,代表当天及以后可选 endDate: "+30d", // 等效原maxDate,代表最远可选30天后 });
- 调用Bootstrap Datepicker的对应方法设置当前日期,不要调用jQuery UI的
datepicker方法:
// 方案1:直接通过bootstrapDP实例调用setDate方法 $("#ExpectedCloseDate").bootstrapDP("setDate", new Date()); // 方案2:先给输入框赋值再触发组件更新,兼容性更强 $("#ExpectedCloseDate").val(new Date().toLocaleDateString('en-GB')).bootstrapDP('update');
补充注意:你的项目中用
bootstrapDP作为实例化别名,本质是为了避免Bootstrap Datepicker和jQuery UI Datepicker的datepicker方法名冲突,所有对该日期组件的操作都要统一用bootstrapDP调用,避免触发jQuery UI的逻辑。
内容的提问来源于stack exchange,提问作者BFilip
相关产品推荐
相关产品推荐

