How to display the year, month and day separately?

Question

JavaScript

When studying vue, I encountered such a problem as outputting all days, months and years to separate selects.
just like in the example. So that when choosing a month, the days would stretch themselves

Answer 1

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>