Vuejs Datepicker禁用元素启用：选择开始日期后启用结束日期选择器

阿华AIGC实验室

2026-5-8

问题分析与优化方案

你的当前实现确实能实现基本功能，但不符合Vue的核心设计理念——Vue是数据驱动框架，直接通过document.querySelector操作DOM会绕开Vue的响应式系统，后续如果有其他逻辑需要控制结束日期选择器的禁用状态，很容易出现数据与DOM状态不一致的问题，维护成本也会变高。

更优的Vue式解决方案（数据驱动）

我们可以用响应式数据来控制结束日期选择器的disabled状态，完全不需要操作DOM：

定义响应式状态
在组件的data中添加一个布尔值，用来控制结束日期选择器的禁用状态：

data() {
  return {
    starts_at: '',
    ends_at: '',
    isEndsAtDisabled: true // 默认禁用结束日期选择器
  }
}

绑定禁用状态到组件
修改结束日期选择器的代码，把固定的disabled属性改成绑定响应式数据：

<date-picker 
  v-model="ends_at" 
  :disabled="isEndsAtDisabled" 
  @input="checkDate()" 
  valueType="format"
></date-picker>

（这里可以去掉id="endsAt"，因为不需要再通过DOM选择器操作它了）

更新启用逻辑
修改enableEndsAt方法，直接操作响应式数据而非DOM：

enableEndsAt() {
  // 当开始日期为空时，重新禁用结束日期；否则启用
  this.isEndsAtDisabled = this.starts_at === ''
}

可选优化：用watch自动监听
如果不想手动在@input里调用方法，可以用watch监听starts_at的变化，自动更新禁用状态：

watch: {
  starts_at(newVal) {
    this.isEndsAtDisabled = newVal === ''
  }
}

这样就可以去掉开始日期选择器上的@input="enableEndsAt()"，代码更简洁。

完整示例代码

<template>
  <div>
    <date-picker 
      v-model="starts_at" 
      valueType="format"
    ></date-picker>
    <date-picker 
      v-model="ends_at" 
      :disabled="isEndsAtDisabled" 
      @input="checkDate()" 
      valueType="format"
    ></date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      starts_at: '',
      ends_at: '',
      isEndsAtDisabled: true
    }
  },
  watch: {
    starts_at(newVal) {
      this.isEndsAtDisabled = newVal === ''
    }
  },
  methods: {
    checkDate() {
      // 你的日期校验逻辑
    }
  }
}
</script>

这种方式完全遵循Vue的数据驱动思想，状态变更清晰可追踪，后续维护和扩展都会更方便。

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