Vue

by ken3desu

HTML

<link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
  <div id="app">
    <div class="form-group row">
      <div class="mr-md-2 w-100 d-flex">
        <label
          for="year"
          class="w-100 d-flex">
          <input
            id="year"
            v-model="selectedYear"
            class="form-control"
            type="number"
            @change="updateDaysList()">年
      </label></div>
      <div class="mr-md-2 w-100 d-flex">
        <label
          for="month"
          class="w-100 d-flex">
          <input
            id="month"
            v-model="selectedMonth"
            class="form-control"
            type="number"
            @change="updateDaysList()">月
        </label>
      </div>
      <div class="mr-md-2 w-100 d-flex">
        <label
          for="day"
          class="w-100 d-flex">
          <select
            id="day"
            v-model="selectedDay"
            name="day"
            class="form-control"
          >
            <option
              v-for="day in days"
              :key="day.day">
              {{ day.day }}
            </option>
          </select>
          <span class="col-form-label ml-md-1 mr-md-2">日</span>
        </label>
      </div>
    </div>
  </div>

CSS

body {
  background: #20262E;
  padding: 20px;
  https://jsfiddle.net/user/settings/font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: '#app',
  data: {
    days: [],
    selectedDay: null,
    selectedMonth: 2,
    selectedYear: 2019,
  },
  mounted: function() {
    this.updateDaysList();
  },
  methods: {
    /**
     * 現状態の年月のselect用日付リストをゲット
     * @return {{day: *, selected: boolean}[]}
     */
    getDays: function() {
      const days = [null];
      const daysNumberOfMonth = new Date(this.selectedYear, this.selectedMonth, 0).getDate();

      for (let i = 1; i < daysNumberOfMonth + 1; i++) {
        days.push(i);
      }

      return days.map((day) => {
        return {day, selected: days === this.selectedDay};
      });
    },
    /**
     * 日付けプルダウンのリストを選ばれている月の日付リストに更新する
     */
    updateDaysList: function() {
      this.days = this.getDays();
    },
  },
});