How to Set minimum and maximum date dynamically in Element-ui date picker

Question

I am having 2 date pickers for startDate and endDate. In startDate Picker,I want to disabled all dates before endDate and vise versa. how to disable dates using elemnt-ui. >

Answer 1

This is an old question but I asked myself the same today. You can achieve this using the disabledDate picker option. Here's an example on how to disable all future dates:

<el-date-picker
  :picker-options="datePickerOptions"
</el-date-picker>

Then in your data object:

data () {
  return {
    datePickerOptions: {
      disabledDate (date) {
        return date > new Date()
      }
    }
  }
}

Answer 2

fist of all you should define picker options for your end date input. The main problem is using this keyword inside the disabledDate method of picker options, so you should move exactly method outside the data definition to the methods part So, complete code should looks something like this:

data () {
    return {
        task: {
            start_at: new Date(),
            end_at: new Date()
        }
        dueDatePickerOptions: {
            disabledDate: this.disabledDueDate
        }
    }
},
methods: {
    disabledDueDate (time) {
        return time.getTime() < this.task.start_at
    },
    validateEndDate () {
        if (this.task.start_at > this.task.due_at) {
            this.task.due_at = this.task.start_at
        }
    }
}

And HTML part of this example should looks like:

<el-date-picker @input="validateEndDate" v-model="task.start_at" type="date"></el-date-picker>
<el-date-picker v-model="task.end_at" :picker-options="dueDatePickerOptions" type="date"></el-date-picker>

Notice: validateEndDate method will be triggered after changing startDate and check if endDate before startDate then fix endDate to be equals.

Answer 3

If you want to get between, you can try it:

datePickerOptions: {
  disabledDate: this.disabledDueDate
}

and your method:

methods: {
  disabledDueDate(date) {  // format Date!
    return !(date >= this.start && date <= this.end)
  },
}