set an unselectable date, the code is as follows:

<DatePicker type="date" format="yyyy-MM-dd" placeholder="" :value="time1" :options="tOption1" @on-change="time1Change" style="width: 90%;"></DatePicker>

<DatePicker type="date" format="yyyy-MM-dd" placeholder="" :value="time" :options="tOption2" @on-change="time2Change" style="width: 90%;"></DatePicker>

at first, two unselectable dates are set in data () , neither today nor later can be selected, as follows:

      tOption1: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now() - 86400000
        }
      },
      tOption2: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now() - 86400000
        }
      }

then in their change method, set the limit that time1 is earlier than time2 when the time is selected:

    time1Change: function (e) {
      //time1 time2 time1
      this.tOption2= {
        disabledDate: date => {
          let time = e ? new Date(e).valueOf() : ""
          return (date && (date.valueOf() < time)) || (date && date.valueOf() > Date.now() - 86400000)
        }
      }
    },
    time2Change: function (e) {
      //time2 time1 time2
      this.tOption1= {
        disabledDate: date => {
          let time = e ? new Date(e).valueOf() : ""
          return e ? (date && (date.valueOf() > time - 86400000)) : (date && date.valueOf() > Date.now() - 86400000)
          //time2
        }
      }
    }

effect is normal, as shown in figure


1;
2time1change time2time1time2 change

,:

2018-10-03change:

so, when DatePicker initially has a default value, the unselectable date set by options in data () doesn"t work. How is that?

what is even more inexplicable is that in our project, another page also needs to set unselectable dates. By the same logic, DatePicker has default values and no default values. At first, the unselectable dates set by options in data () are all normal, damn it.