Vue.jsにてカレンダーを双方向データバインドする

Vue.jsにてカレンダーを双方向データバインドする | レンジ入力とカラー選択を同期する | Bidirectional data binding on calendar

カレンダーにて双方向データバインドする

ご希望到着日:{{arrival_date}}

HTML <div id=”app”>
<span class=”yellow”>ご希望到着日:{{arrival_date}}</span><br>
<input type=”date” v-model=”arrival_date”>
</div>

JavaScript var app = new Vue({
el:’#app’,
data: {
arrival_date: null
},
created: function(){
// 初期値を設定する
this.arrival_date = this.formatDate(new Date());
},
methods: {
// 日付をyyyy-mm-ddに整形するメソッド
formatDate: function(dt){
var y = dt.getFullyear();
var m = (’00’ + (dt.getMonth()+1)).slice(-2);
var d = (’00’ + dt.getDate()).slice(-2);
var result = y +’-‘ + m + ‘-‘ + d;
}
}
});

カレンダーにて双方向データバインドする（日付の選択範囲を制限）

ご希望到着日:{{arrival_date}}

過去の日付も選択できてしまうため、翌日以降の日付しか選択できないように改善する

HTML <div id=”app2″>
<p>ご希望到着日:{{arrival_date}}</p>
<input type=”date” v-model=”arrival_date”　v-bind:min=”min_date”>
<p class=”red”>過去の日付も選択できてしまうため、翌日以降の日付しか選択できないように改善する</p>
</div>

CSS .red {
color: red;
}

JavaScript var app2 = new Vue({
el:’#app2′,
data: {
arrival_date: null,
min_date: null
// null →意図的にオブジェクトの値が何もないことを示す。
},
created: function(){
// 翌日の日付を初期値とする
var dt = new Date();
dt.setDate(dt.getDate() + 1);
this.arrival_date = this.formatDate(dt);
// 翌日の日付を最小値とする
this.min_date = this.arrival_date;
},
methods: {
// 日付をyyyy-mm-ddに整形するメソッド
formatDate: function(dt){
var y = dt.getFullYear();
var m = (’00’ + (dt.getMonth()+1)).slice(-2);
var d = (’00’ + dt.getDate()).slice(-2);
var result = y +’-‘ + m + ‘-‘ + d;
return result;
}
}
});

レンジ入力とカラー選択を同期する

あなたの好きな色は？ {{color}}
赤：{{red}}
緑：{{green}}
青：{{blue}}

スライダーを動かして大まかな数値を入力できるtype=”range”や、カラーパレットから色を選択できるtype=”color”のデータバインド。 watchを利用して２つを連動させてます。

HTML <div id=”app3″>
<fieldset>
<legend>あなたの好きな色は？</legend>
<input type=”color” v-model=”color”> {{color}} <br>
<span class=”red”>赤：<input type=”range” v-model.number=”red” min=”0″ max=”255″>{{red}}<br>
<span class=”green”>緑：<input type=”range” v-model.number=”green” min=”0″ max=”255″>{{green}}<br>
<span class=”blue”>青：<input type=”range” v-model.number=”blue” min=”0″ max=”255″>{{blue}}<br>
</fieldset>

CSS .red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}

JavaScript var app3 = new Vue({
el: ‘#app3’,
data: {
color: ‘#000000’,
red: 0,
blue: 0,
green: 0
},
computed: {
colorElement: function(){
return[this.red, this.green, this.blue];
}
},
watch: {
// 赤、緑、青のいずれかを変更を監視する
colorElement : function(newRGB, oldRGB){
var r = (’00’ + newRGB[0].toString(16).toUpperCase()).slice(-2);
var g = (’00’ + newRGB[1].toString(16).toUpperCase()).slice(-2);
var b = (’00’ + newRGB[2].toString(16).toUpperCase()).slice(-2);
// #PRGGBB形式の文字列で更新する。
this.color = ‘#’ + r + g + b;
},
// カラーパレットの選択変更を監視する
color: function(newColor, oldColor){
this.red = parseInt(newColor.substr(1,2),16);
this.green = parseInt(newColor.substr(3,2),16);
this.blue = parseInt(newColor.substr(5,2),16);
}
}
});

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

レベルアップにはプロからの学びもあり。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

就職・転職支援