我正在尝试设置日期范围,以允许用户使用vue-datepicker选择日期,因为桌面野生动物园用户在使用输入类型date时遇到问题。查阅vue-datepicker的文档并查看其演示,我真的很困惑。我该在哪里应用禁用数据来限制datepicker下拉菜单中的日期范围?
我试图将:disabled =“ disabled”放在datepicker中,但是文档说它期望布尔响应。任何帮助将不胜感激!
<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>
新尝试:
<datepicker v-model="booking_form.booking_date" :disabled-dates="disabled"></datepicker>
答案 0 :(得分:1)
尝试了很多之后,以下代码为我工作(其中datepicker禁用了从现在起1个月后的所有日期以及以前的所有日期)。我使用了 datepicker 文档datepicker npm
中提到的范围template :::
<datepicker :disabledDates="disabledDates" ></datepicker>
script ::::
import Datepicker from 'vuejs-datepicker';
export default {
data(){
return {
disabledDates:{
ranges:[]
}
}
},
mounted() {
this.defaultDateRange();
},
components:{
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);
}
}
答案 1 :(得分:0)
要在可选日期中省略某些日期,应将disabled-dates
属性(而不是disabled
)设置为:
<datepicker v-model="booking_date" :disabled-dates="disabled"></datepicker>
然后您可以在disabled
部分中设置data
约定,您显然已经在问题的js代码中做了约定。
答案 2 :(得分:0)
该属性称为DisabledDates,您可以在npm page中阅读有关此属性的更多信息。
jsFiddle:https://jsfiddle.net/h3gkqc4w/
<div id="app">
<d-p
v-model="model.date"
:format="DatePickerFormat"
:disabled-dates="disabledDates">
</d-p>
</div>
new Vue({
el: "#app",
components:{'d-p': vuejsDatepicker},
data: {
model: {
date: ''
},
DatePickerFormat: 'dd/MM/yyyy',
disabledDates: {
to: new Date(Date.now())
}
}
})
答案 3 :(得分:0)
<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>