【Vue.js】日付選択フォームの作成（年・月・日）

TypeScript

2019.01.22

Vue.jsで日付選択フォームを作成する方法について入門者向けにまとめました。

## 【Vue.js】日付選択フォーム

Vue.jsで日付選択フォームを作成します。

## サンプルコード

サンプルプログラムのソースコードです。

HTML

index.html

<pre class="html">
<html>
<form id="selectDate">
  <select v-model="year" @change="get_days">
    <option v-for="n in 50" :value="n + 1980">
      {{ n + 1980 }}
    </option>
  </select>年
  <select v-model="month" @change="get_days">
    <option v-for="n in 12" :value="n">
      {{ n }}
    </option>
  </select>月
   <select v-model="day">
    <option v-for="n in days_max" :value="n">
      {{ n }}
    </option>
  </select>日
</form>
</html>
</pre>

Javascript

js/main.js

var vm = new Vue({
  el: '#selectDate',
  data: {
    year: 2018,
    month: 1,
    day: 1,
    days_max: '',
  },
  created: function () {
    this.get_days();
  },
  methods: {
    // 日の最大数を取得
    get_days: function () {
      this.days_max = new Date(this.year, this.month, 0).getDate();
    }
  }
});