element时间组件，开始时间小于结束时间

最新推荐文章于 2024-11-05 11:23:51 发布

原创最新推荐文章于 2024-11-05 11:23:51 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #elementui

文章展示了如何在Vue.js中使用el-date-picker组件来创建一个日期时间选择器，并设置禁用日期范围。通过v-model绑定startTime和endTime，以及pickerOptions中的disabledDate函数，确保用户不能选择超过开始和结束时间的日期。

<el-date-picker v-model="fromInfo.startTime" :picker-options="pickerOptions0" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择开始时间">

<el-date-picker v-model="fromInfo.endTime" :picker-options="pickerOptions1" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择结束时间">

export default {
    data(){
    return {
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.fromInfo.endTime) {
            return time.getTime() > new Date(this.fromInfo.endTime).getTime();
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.fromInfo.startTime) {
            return time.getTime() <= new Date(this.fromInfo.startTime).getTime() - 8.64e7;
          }
        }
      },
    }
  }
}