我正在制作一个用户必须提交其出生日期的表格。
天数会根据所选的月份和年份动态更新,即一月为 31 天,三月为 31 天,依此类推。
如果选择的日期小于生成的月份的天数,则选择的日期将为 1。
但问题是当您在任何一个月中选择超过 29 天之后选择二月时,所选日期不会设置为 1。
例如: 假设我选择了 Day: 31 和 Month: January,然后当我选择 Month: February 时保持这一天,即第 31 天不变,所选日期不会设置为 1,因为所选日期 (31) > 生成日期 (28)。
以下代码适用于其他月份,但仅不适用于二月。
帮助我:
代码:
new Vue({
el: '.field',
data: {
dobYear: 1900,
dobMonth: 'january',
dobDay: 1,
months: [
{month: 'january', days: 31},
{month: 'february', days: {reg: 28, leap: 29}},
{month: 'march', days: 31},
{month: 'april', days: 30},
{month: 'may', days: 31},
{month: 'june', days: 30},
{month: 'july', days: 31},
{month: 'august', days: 31},
{month: 'september', days: 30},
{month: 'october', days: 31},
{month: 'november', days: 30},
{month: 'december', days: 31},
],
},
computed: {
filterYear() {
let getYear = new Date().getFullYear();
return Array.from({length: getYear - 1899}, (value, index) => index + 1900);
},
filterDays() {
const month = this.months.filter(value => value.month === this.dobMonth)[0];
let y = this.dobYear;
// Here's the problem
if(this.dobDay > month.days) {
this.dobDay = 1;
}
if(!((y % 4) || (!(y % 100) && y % 400)) && this.dobMonth === 'february') {
return month && month.days.leap;
}else if(this.dobMonth === 'february') {
return month && month.days.reg;
}
return month && month.days;
}
}
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div class="field">
<label for="date-of-birth">Date of Birth:</label><br>
<select v-model="dobYear">
<option
v-for="year of filterYear"
:value="year">
{{ year }}
</option>
</select>
<select v-model="dobMonth">
<option
v-for="mon of months"
:value="mon.month">
{{ mon.month }}
</option>
</select>
<select v-model="dobDay">
<option v-for="day in filterDays" :value="day">{{ day }}</option>
</select>
</div><br>
最佳答案
month.days
是一个对象。您需要在 month.days
上检查 reg
属性,例如 this.dobDay > month.days.reg
new Vue({
el: '.field',
data: {
dobYear: 1900,
dobMonth: 'january',
dobDay: 1,
months: [
{month: 'january', days: 31},
{month: 'february', days: {reg: 28, leap: 29}},
{month: 'march', days: 31},
{month: 'april', days: 30},
{month: 'may', days: 31},
{month: 'june', days: 30},
{month: 'july', days: 31},
{month: 'august', days: 31},
{month: 'september', days: 30},
{month: 'october', days: 31},
{month: 'november', days: 30},
{month: 'december', days: 31},
],
},
computed: {
filterYear() {
let getYear = new Date().getFullYear();
return Array.from({length: getYear - 1899}, (value, index) => index + 1900);
},
filterDays() {
const month = this.months.filter(value => value.month === this.dobMonth)[0];
let y = this.dobYear;
// Here's the problem
if(this.dobDay > month.days.leap || this.dobDay > month.days) {
this.dobDay = 1;
}
if(!((y % 4) || (!(y % 100) && y % 400)) && this.dobMonth === 'february') {
return month && month.days.leap;
}else if(this.dobMonth === 'february') {
return month && month.days.reg;
}
return month && month.days;
}
}
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div class="field">
<label for="date-of-birth">Date of Birth:</label><br>
<select v-model="dobYear">
<option
v-for="year of filterYear"
:value="year">
{{ year }}
</option>
</select>
<select v-model="dobMonth">
<option
v-for="mon of months"
:value="mon.month">
{{ mon.month }}
</option>
</select>
<select v-model="dobDay">
<option v-for="day in filterDays" :value="day">{{ day }}</option>
</select>
</div><br>
关于javascript - VueJS : Data not Updating,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50231093/