admin管理员组文章数量:1418086
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 working a below code worked for me. Could you please check once? – Pallamolla Sai Commented Apr 19, 2019 at 16:27
5 Answers
Reset to default 1After 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>
本文标签： javascriptvuedatepicker to disable before and fromStack Overflow
版权声明：本文标题：javascript - vue-datepicker to disable before and from - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745234798a2648986.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论