Как отдельно вывести год, месяц и день?

Question

[Greeg Zagrelov]

При изучении vue столкнулся с такой проблемой как вывод в отдельные select все дни, месяца и года.
Вот так как на примере. Чтобы при выборе месяца дни потягивались сами.

Answer 1

[0xD34F]

data: () => ({
  year: null,
  month: null,
  day: null,
}),
computed: {
  daysCount() {
    const { year, month } = this;
    return year !== null && month !== null
      ? new Date(this.year, this.month + 1, 0).getDate()
      : 0;
  },
  date() {
    const { year, month, day } = this;
    return year !== null && month !== null && day !== null
      ? new Date(year, month, day)
      : null;
  },
},
watch: {
  daysCount(val) {
    if (this.day) {
      this.day = Math.min(this.day, val);
    }
  },
},

<select v-model="year">
  <option v-for="i in 30">{{ 2000 + i }}</option>
</select>
<select v-model="month">
  <option v-for="i in 12" :value="i - 1">
    {{ new Date(0, i - 1).toLocaleDateString('ru-RU', { month: 'long' }) }}
  </option>
</select>
<select v-model="day">
  <option v-for="i in daysCount">{{ i }}</option>
</select>

Comments

[Greeg Zagrelov]

Спасибо большое, мотивация для меня + в карму для вас.