Vue学习-处理开始日期不能大于结束日期，结束日期不能小于开始日期

最新推荐文章于 2025-09-24 10:11:10 发布

原创最新推荐文章于 2025-09-24 10:11:10 发布 · 3.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

Vue 专栏收录该内容

16 篇文章

订阅专栏

该博客介绍了如何在前端使用DatePicker组件限制开始日期不能大于结束日期，以及结束日期不能小于开始日期。通过设置`disabledDate`属性，确保用户在选择开始和结束年月时遵循正确的顺序，并提供了具体的代码示例。

Form-item label="开始年-月" prop="startDate">
   <DatePicker
    type="month"
    format="yyyy-MM"
    v-model="searchForm.startDate"
    style="width: 200px"
    :options="startOptions"
    ></DatePicker>
</Form-item>
<Form-item label="结束年-月" prop="endDate">
    <DatePicker
    type="month"
    format="yyyy-MM"
    v-model="searchForm.endDate"
    style="width: 200px"
    :options="endOptions"
    ></DatePicker>
</Form-item>

data() {
   return {
      tableHeaders:[],
      searchForm:{
        startDate: "",
        endDate: ""
      },
      startOptions:{
          // 指定终止日期 这里指定开始年月不能大于当前年月，可根据需求修改
            disabledDate: (date) => {
                let data = this.searchForm.endDate == '' ?  Date.now() : this.searchForm.endDate
                // 不能选择大于当前年月或大于结束年月
                return date > data
            }
      },
      endOptions: {
            // 指定终止日期
            disabledDate: (date) => {
                let data = this.searchForm.startDate == '' ? '' : this.searchForm.startDate
                // 不能选择小于开始年月日期，若开始年月为空则没有限制
                return date<data
            }
      },
   } 
},