关于element-ui日期选择器disabledDate使用心得

野性酷女 2023-06-21 11:24 36阅读 0赞

> 实现目的:
> 
> 　　使用type="data"类型实现具备开始日期与结束日期组件(ps:element有自带的type="daterange"类型的组件可以实现此功能)
> 
> 　　1、开始日期和结束日期都被限制只能选择早于当天（包括当天）的日期
> 
> 　　2、选择完开始日期，选择结束日期时，只能选择开始日期到当天日期的范围
> 
> 　　3、先选择结束日期，再选择开始日期，则只能选择结束日期之前的范围

代码:  ( HTML 部分 )

代码:  ( JavaScript 部分 )

var Main = {
        data() {
          return {
              value2: '',
            value3: '',
            startDatePicker:this.beginDate(),
            endDatePicker:this.processDate()
          };
        },
        methods: {
            beginDate(){
            let self = this
            return {
              disabledDate(time){
              return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                 }
               }
          },
          //提出结束时间必须大于提出开始时间
          processDate(){
            let self = this
            return {
              disabledDate(time){
                if(self.value2){
                  return new Date(self.value2).getTime() > time.getTime() || time.getTime() > Date.now()
                }else{
                  return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                }
              }
            }
          }
        }
      };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

转载链接:  [https://www.cnblogs.com/hrlin/p/8778630.html][https_www.cnblogs.com_hrlin_p_8778630.html]

[https_www.cnblogs.com_hrlin_p_8778630.html]: https://www.cnblogs.com/hrlin/p/8778630.html