<!--HTML-->
<div id="app">
myDate: <input-date v-model="myDate"></input-date>
<p>myDate: {{ myDate }}</p>
<button @click="setMyDateToToday">Set date one to today</button>
<button @click="addADayToMyDate">Add a day to my date</button>
</div>
//Vue JS
Vue.component('input-date', {
template: '\
<input\
type="date"\
ref="input"\
v-bind:value="dateToYYYYMMDD(value)"\
v-on:input="updateValue($event.target)"\
v-on:focus="selectAll"\
>\
',
props: {
value: {
type: Date,
default: new Date()
}
},
methods: {
dateToYYYYMMDD(date) {
// may have timezone caveats https://stackoverflow.com/a/29774197/1850609
return date && date.toISOString().split('T')[0]
},
updateValue: function (target) {
this.$emit('input', target.valueAsDate);
},
selectAll: function (event) {
// Workaround for Safari bug
// http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
setTimeout(function () {
event.target.select()
}, 0)
}
}
});
new Vue({
el: '#app',
data: {
myDate: new Date('2011-04-11T10:20:30Z')
},
methods: {
setMyDateToToday() {
this.myDate = new Date();
},
addADayToMyDate() {
if (this.myDate) // as myDate can be null
// you have to set the this.myDate again, so vue can detect it changed
// this is not a caveat of this specific solution, but of any binding of dates
this.myDate = new Date(this.myDate.setDate(this.myDate.getDate() + 1));
}
}
});
// Notes:
// We use `myDate && myDate.toISOString().split('T')[0]` instead
// of just `myDate.toISOString().split('T')[0]` because `myDate` can be null.
// the date to string conversion myDate.toISOString().split('T')[0] may
// have timezone caveats.
