moment.locale('en');
const timePickerComponent = {
\t props: {
\t day: String,
caption: String,
options: Object
},
template: `
\t <div>
\t <select class="form-control" v-model="timeSelected" @change="timeChanged">
<option value="">{{caption}}</option>
<option v-for="time in times">{{ time }}</option>
</select>
</div>
`,
data() {
\t return {
\t times: this.createTimes(),
timeSelected: ''
}
},
watch: {
\t 'options.start'() {
\t this.times = this.createTimes(); // re-create times
}
},
methods: {
\t timeChanged() {
\t console.log('changed', this.timeSelected)
\t this.$emit('changed', {day: this.day, selected: this.timeSelected});
},
\t createTimes() {
\t // 0:00am to 0:00pm
const formatStr = 'hh:mm a';
let start = moment(this.options.start, formatStr);
let range = this.options.hours; // 8 hours
let times = new Array(range*4+1).fill(start);
console.log(start, times);
\t return times.map((item, index) => {
\t return (index > 0 ? item.add(15, 'm') : item).format(formatStr);
});
}
}
};
new Vue({
\t el: '#app',
data() {
\t return {
\t days: [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
],
\t openOptions: {
\t start: "12:00 am",
hours: 24
},
closeOptions: {
\t start: "12:00 am",
hours: 8
},
newPost: undefined
}
},
created() {
\t this.newPost = this.createEmptyPost();
},
methods: {
\t createEmptyPost() {
\t let newPost = {};
this.days.forEach((day) => {
newPost[day] = {
\t openingTime: undefined,
closingTime: undefined
};
});
return newPost;
},
\t closingChanged(val) {
\t this.newPost[val.day].closingTime = val.selected;
},
\t openingChanged(val) {
\t console.log(val);
\t this.newPost[val.day].openingTime = val.selected;
console.log(moment(val.selected, 'hh:mm a').hour());
this.closeOptions.start = moment(val.selected, 'hh:mm a');
}
},
components: {
\t timePicker: timePickerComponent
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<div id="app">
<div v-for="day in days">
{{day}}:
<time-picker :day="day" caption="Opens" :options="openOptions" @changed="openingChanged"></time-picker>
<time-picker :day="day" caption="Closes" :options="closeOptions" @changed="closingChanged"></time-picker>
<hr/>
</div>
<pre>
{{newPost}}
</pre>
</div>