elementUI的日期选择框，两选择框关联时间限值

最新推荐文章于 2024-04-22 16:01:16 发布

原创最新推荐文章于 2024-04-22 16:01:16 发布 · 500 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

本文介绍了如何在 Vue 中使用 Element UI 的日期选择器组件，并实现了一个功能，即在选择结束日期时，只能选取大于等于开始日期的日期范围。通过`disabledDate`选项和JavaScript逻辑，确保了日期选择的合理性。

<el-date-picker
            style="width:48%"
                                      class="datepicker"
                                      size="mini"
                                      v-model="startTimed"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      format="yyyy-MM-dd"
                                      :picker-options="start_date"
                                      placeholder="选择开始日期">
                                    </el-date-picker>
                                    <span style="display: inline-block; 40px;font-size: 12px;text-align: center;">~</span>
                                    <el-date-picker
                                    style="width:48%"
                                      class="datepicker"
                                      size="mini"
                                      v-model="endTimed"
                                      type="date"
                                      value-format="yyyy-MM-dd"
                                      format="yyyy-MM-dd"
                                      :picker-options="end_date"
                                      placeholder="选择结束日期">
                                    </el-date-picker>

 data() {
    return {
      startTimed:'',
      endTimed:'',
      end_date:{//结束时间范围限定
          disabledDate:time => {
            var month = ''
            var day = ''
            month = Number(time.getMonth())+1
            day = time.getDate()
            if(month<10){
              month = '0'+month
            }
            if(day <10){
              day = '0'+day
            }
            var tiems = ''
            tiems = time.getFullYear()+'-'+month+'-'+day
              return tiems < this.startTimed;
          }
      },
}
}