I am attempting to set a range of dates to allow users to pick the date using vue-datepicker, since desktop safari users have problems using input type date. Going thru the documentation of vue-datepicker and looking at the demo it has, I got really confused. Where do I apply the disable data to limit the range of dates on the datepicker dropdown?
I have tried to put the :disabled="disabled" in datepicker, but documentation says it expects a boolean response. Any help is greatly appreciated!
<template>
<div>
<datepicker v-model="booking_date"></datepicker>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker';
import moment from 'moment';
export default {
data() {
return {
moment: moment,
booking_date: null,
disabled: {},
}
},
mounted() {
this.defaultDateRange();
},
methods: {
defaultDateRange() {
let tzoffset = new Date().getTimezoneOffset() * 60000;
let today = (new Date(Date.now() - tzoffset)).toISOString().substr(0, 10);
let max = new Date();
max.setDate(max.getDate() + 30);
let max_date = max.toISOString().substr(0, 10);
this.disabled = {
to: Date.parse(today),
from: Date.parse(max_date)
};
this.booking_date = Date.parse(today);
}
}
}
</script>
new attempt:
<datepicker v-model="booking_form.booking_date" :disabled-dates="disabled"></datepicker>
I am attempting to set a range of dates to allow users to pick the date using vue-datepicker, since desktop safari users have problems using input type date. Going thru the documentation of vue-datepicker and looking at the demo it has, I got really confused. Where do I apply the disable data to limit the range of dates on the datepicker dropdown?
I have tried to put the :disabled="disabled" in datepicker, but documentation says it expects a boolean response. Any help is greatly appreciated!
<template>
<div>
<datepicker v-model="booking_date"></datepicker>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker';
import moment from 'moment';
export default {
data() {
return {
moment: moment,
booking_date: null,
disabled: {},
}
},
mounted() {
this.defaultDateRange();
},
methods: {
defaultDateRange() {
let tzoffset = new Date().getTimezoneOffset() * 60000;
let today = (new Date(Date.now() - tzoffset)).toISOString().substr(0, 10);
let max = new Date();
max.setDate(max.getDate() + 30);
let max_date = max.toISOString().substr(0, 10);
this.disabled = {
to: Date.parse(today),
from: Date.parse(max_date)
};
this.booking_date = Date.parse(today);
}
}
}
</script>
new attempt:
<datepicker v-model="booking_form.booking_date" :disabled-dates="disabled"></datepicker>
After trying a lot the following code worked for me(In which datepicker disabled all the dates which e after 1 month from present as well as all previous dates). I have used ranges as mentioned in datepicker documentation datepicker npm
template:::
<datepicker :disabledDates="disabledDates" ></datepicker>
script::::
import Datepicker from 'vuejs-datepicker';
export default {
data(){
return {
disabledDates:{
ranges:[]
}
}
},
mounted() {
this.defaultDateRange();
},
ponents:{
Datepicker
},
methods:{
let tzoffset = new Date().getTimezoneOffset() * 60000;
let today = (new Date(Date.now() - tzoffset));
let oldToday = new Date(today.getTime()); // AS DATES ARE REFRENCE COOPIED I HAD TO COPY THE VALUE OF TODAY
oldToday.setDate(oldToday.getDate()-1);
today.setMonth(today.getMonth()+1); // GETTING NEXT MONTHS DATE
let max = new Date(); // YOU CAN REMOVE THIS MAX VARIABLE I JUST PUT IT FOR YOUR REFRENCE
let obj = {};
max.setDate(max.getDate() + 30);
let max_date = max;
obj["from"] = new Date(0,0,0); // FOR DISABLING ALL PREVIOUS DATES I PUT THIS IN RANGES ARRAY INSIDE DISABLEDDATES OBJECT
obj["to"] = oldToday;
this.disabledDates["ranges"].push(obj);
this.disabledDates["from"] = today;
console.log("disableDates is ");
console.log(this.disabledDates);
this.booking_date = Date.parse(today);
}
}
To omit certain dates out of the selectable ones, you should disabled-dates attribute (not disabled) as:
<datepicker v-model="booking_date" :disabled-dates="disabled"></datepicker>
And you can then set disabled convention in your data section which you apparently already did in your js code in the question.
The property is called disabledDates, you can read more about it in the npm page.
jsFiddle: https://jsfiddle/h3gkqc4w/
<div id="app">
<d-p
v-model="model.date"
:format="DatePickerFormat"
:disabled-dates="disabledDates">
</d-p>
</div>
new Vue({
el: "#app",
ponents:{'d-p': vuejsDatepicker},
data: {
model: {
date: ''
},
DatePickerFormat: 'dd/MM/yyyy',
disabledDates: {
to: new Date(Date.now())
}
}
})
<!--First Date-->
<VCol cols="12" md="3">
<AppDateTimePicker
v-model="formData.first_date"
label="First Date"
:config="{ dateFormat: 'd/m/Y' }"
placeholder="DD/MM/YYYY"
clearable
clear-icon="tabler-x"
:rules="
myStore.currentStep === 0 ? [requiredValidator] : []"
@click:clear="clearDate"
/>
</VCol>
<VSpacer />
<!--Second Date-->
<VCol cols="12" md="3">
<AppDateTimePicker
v-if="isDisable"
v-model="formData.second_date"
label="Second Date"
:config="{ dateFormat: 'd/m/Y' }"
placeholder="DD/MM/YYYY"
disabled
/>
<AppDateTimePicker
v-else
v-model="formData.second_date"
label="Second Date"
:config="{ dateFormat: 'd/m/Y' }"
placeholder="DD/MM/YYYY"
clearable
clear-icon="tabler-x"
/>
</VCol>
Use simple v-if and v-else for disabled date picker in Vuetify3 or later. Thank You, Happy Coding :)
<input type="date" id="datemin" name="datemin" min="currentDateWithFormat">
<script>
var currentDate = new Date();
var currentDateWithFormat = new Date()
.toJSON()
.slice(0, 10)
.replace(/-/g, "-");
console.log(currentDateWithFormat);
</script>