CODEWITHSUNDEEP
vue.jselement-ui
user9265584
user9265584

Reputation: 71

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

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

Upvotes: 7

Views: 24458

Answers (6)

Byron Gavras
Byron Gavras

Reputation: 990

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>

Upvotes: 0

Ognjen
Ognjen

Reputation: 619

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>

Upvotes: 0

Shamil Qurbonov
Shamil Qurbonov

Reputation: 41

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

Upvotes: 1

David D.
David D.

Reputation: 567

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.

Upvotes: -2

Николай Лантинов
Николай Лантинов

Reputation: 139

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.

Upvotes: 13

Christof
Christof

Reputation: 3927

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

Upvotes: 16

Related Questions