(引导) Vue Datepicker:如何定义开始日期和结束日期，以便结束日期不能在开始日期之前？
(引导) Vue Datepicker:如何定义开始日期和结束日期，以便结束日期不能在开始日期之前？
提问于 2020-12-08 12:19:25
我在Vue.js中有两个Vue.js的表格。我想实现一个假日管理器，这样您就可以定义假期的开始(输入-3)和结束日期(输入-4)。结束日期应大于或等于开始日期。我目前的实现如下：
<b-form-group
id="input-group-3"
label="Anfangsdatum:"
label-for="input-3"
>
<b-form-datepicker
id="input-3"
v-model="von"
placeholder="Anfangsdatum auswählen"
required
:min="minAnfang"
></b-form-datepicker>
</b-form-group>
<b-form-group id="input-group-4" label="Enddatum:" label-for="input-4">
<b-form-datepicker
id="input-4"
v-model="bis"
placeholder="Enddatum auswählen"
:min="minEnde"
required
></b-form-datepicker>
</b-form-group>Vue中的数据部分实现如下：
data() {
const datum = new Date();
const datum_heute = new Date(datum.getFullYear(), datum.getMonth(), datum.getDate());
const minVon = new Date(datum_heute);
minVon.setDate(minVon.getDate()+ 1);
const minBis = new Date(datum_heute);
minBis.setDate(minVon.getDate()+1);
return {
Urlaubsart: "",
Grund: "",
von: "",
bis: "",
Status: "",
BenutzerID: 24,
minAnfang: minVon,
minEnde: minBis,
arten: [
{ value: null, text: "Wählen Sie die Urlaubsart aus" },
{ value: "Urlaub", text: "Urlaub" },
{ value: "Sonderurlaub", text: "Sonderurlaub" },
],
gruende: [
{ value: "Umzug", text: "Umzug" },
{ value: "Hochzeit", text: "Hochzeit" },
{ value: "Geburt", text: "Geburt" },
{ value: "Umzug", text: "Sonstiges" },
],
Urlaubstage: "",
};
}那么，如何确保结束日期等于或大于开始日期？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-10 10:59:45
我已经为您创建了一个代码库：https://codepen.io/mtveerman/pen/gOwwNoL (请注意，我使用vuetify作为布局引擎，但您将了解到)
我所做的：
定义一个property
- Define --一个具有
get和set函数的计算的bis属性:如果setfunction
- Compare D15和
D16在get函数中设置internalBis属性，则
在internalBis中设置internalBis属性，如果d19小于von
在组件和表单提交中，您应该只使用bis，因为这将始终返回正确的值。请注意，如果von现在更改为原始bis之后的日期，则bis也会自动更改。
对您来说，最有趣的代码是：
data: () => ({
von: new Date().toISOString().substr(0, 10),
internalBis: new Date().toISOString().substr(0, 10)
}),
computed: {
bis: {
// getter
get: function () {
if (this.internalBis < this.von) {
return this.von
}
return this.internalBis
},
// setter
set: function (newValue) {
this.internalBis = newValue
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65198818
复制相关文章
相似问题
腾讯云开发者
