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. >

What have you tried? Posting your code along with the question tends to help. — , Jan 29 '18 at 10:06
` ` ` ` these are my 2 date pickers. I have added :picker-options= disabledDate function but above code is desabling my whole calendar — user9265584, Jan 29 '18 at 10:11

score 16 · Answer 1 · answered Feb 06 '18 at 15:05

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()
      }
    }
  }
}

score 13 · Answer 2 · answered Jun 07 '18 at 07:42

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.

This solution doesn't work for me, since `this` is not defined inside the scope of `picker-options` attribute. — guyaloni, Sep 09 '22 at 14:26

score 1 · Answer 3 · edited Jun 29 '20 at 18:52

1

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)
  },
}

edited Jun 29 '20 at 18:52

Matt Ke

3,599
12
30
49

answered Jun 29 '20 at 15:45

Shamil Qurbonov

41
3

score 0 · Answer 4 · answered May 16 '21 at 15:00

I solved this by putting the picker options inside the computed property, and using the moment.js library to check if the date is in between two dates:

computed: {
  inBetweenDatesPickerOptions() {
    return {
      disabledDate: (time) => {
        return !moment(time.getTime()).isBetween(this.form.start_date, this.form.end_date);
      }
    }
  }
}

And in the markup you can set the options by using the :picker-options prop:

<el-date-picker 
  v-model="form.in_between_date" 
  :picker-options="inBetweenDatesPickerOptions" 
  type="date">
</el-date-picker>

Byron Gavras · Answer 5 · 2023-03-06T16:00:27.337

Using Composition Api

 <template>
 <el-date-picker
  v-model="selectedDate"
  :disabled-date="disabledDate"
  type="daterange"
  placeholder="Select date">
 </el-date-picker>
 </template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedDate = ref(new Date());
    const minDate = ref(new Date());
    const maxDate = ref(new Date());

    const dateStart =  new Date(1677794400 * 1000);
    const dateStart =  new Date(1678399200 * 1000);
    minDate.value.setDate(dateStart.getDate()-1)
    minDate.value.setMonth(dateStart.getMonth())
    minDate.value.setFullYear(dateStart.getFullYear())
    
    maxDate.value.setDate(dateEnd.getDate())
    maxDate.value.setMonth(dateEnd.getMonth())
    maxDate.value.setFullYear(dateEnd.getFullYear())

   function disabledDate(vDate){
        return vDate < minDate.value || vDate > maxDate.value;
    }


    return {
      selectedDate,
      disabledDate
    };
  }
};
</script>

score -2 · Answer 6 · answered Jun 01 '19 at 13:05

-2

An easier solution would be limiting min/max values dynamically. I suggest this:

<input type="date" class="form-control" v-model="dateFrom" :max="dateTo">
<input type="date" class="form-control" v-model="dateTo" :min="dateFrom">

This would limit the date picker to proper date ranges.

answered Jun 01 '19 at 13:05

David D.

557
7
20

The answer doesn't have any relation to the implemention of date limitation in datepicker from Element UI – Erdo Dirgagautama Jan 06 '20 at 23:20

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

6 Answers6