Bootstrap Vue日期选择器默认值问题：未选时自动设为1970年1月1日

问题根源 #

你碰到的1970-01-01是空字符串转Date对象时的默认无效日期。当你初始把activeFrom和activeTo设为空字符串，或者Reset方法的判断逻辑有漏洞时，调用new Date("")会生成这个无效日期，最终导致提交时出现该值。

修复步骤 #

1. 初始值直接设为null
   Bootstrap Vue的日期选择器原生支持null作为空状态值，不需要用空字符串。这样组件会正确显示为空，不会自动解析成无效日期。

2. 调整Reset方法的判断逻辑
   明确区分“未选择日期（值为null）”和“已选择日期”的情况，避免把空值错误传入new Date()。

修改后的代码 #

data() {
    return {
        form: { // 注意：原代码data返回的变量和方法里的this.form要统一成对象形式
            activeTo: null,
            activeFrom: null
        }
    }
},
methods: {
    Reset() {
        // 有值则转ISO字符串，无值保持null
        this.form.activeFrom = this.form.activeFrom ? new Date(this.form.activeFrom).toISOString() : null;
        this.form.activeTo = this.form.activeTo ? new Date(this.form.activeTo).toISOString() : null;
    }
}

额外注意点 #

• 确保日期选择器组件双向绑定到form内的变量，示例如下：

  <b-form-datepicker v-model="form.activeFrom"></b-form-datepicker>
  <b-form-datepicker v-model="form.activeTo"></b-form-datepicker>
  

• 不要对null执行new Date()操作，因为new Date(null)同样会生成1970-01-01，这是JavaScript的原生行为。

内容的提问来源于stack exchange，提问作者Cherno