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();
}
}
});
– | 関連記事 |
---|---|
1 | ■【Vue.js入門】使い方・サンプル集 |
2 | ■【Javascript入門】基礎的な使い方とサンプル集 |
コメント