Reputation: 73
Lets assume that current date/time is 03/29/2020 02:10 PM. Then i want to display 7 sets of time with fifteen minutes interval that will be 01:30 PM , 01:45 PM , 02:00 PM , 02:15 PM, 02:30 PM , 02:45 PM and 03:00 PM.
Current Date/Time = 03/29/2020 02:10 PM
<div :key="timeList">
<button>{{timeList}}</button>
</div>
How can i display seven sets of time in timeList as 15 minutes interval for currentTime as
Upvotes: 1
Views: 1631
Reputation: 147563
If the current time is 02:10, then the next 15 minute block starts at 02:15.
Anyway, you can use built–in formatting functions to get the appropriate format, e.g.
/*
** @param {Date} date: date to use for time blocks
** @param {number} mins: length of time block in minutes
** should be an even divisor of 60, e.g. 5, 10, 12, 15
** @param {number} num: number of values to return
** @returns {Array} array of strings formatted as hh:mm ap
*/
function getTimes(date, mins, num) {
// Copy date so don't affect original
let d = new Date(date);
// Get start of next block
let dMins = d.getMinutes();
let nextMin = Math.ceil(dMins/mins) * mins;
// If in first minute of first block, add 1
if (!(dMins%mins)) nextMin += mins;
d.setMinutes(nextMin, 0, 0);
let result = [];
let opts = {hour:'2-digit', minute:'2-digit', hour12:true};
while (num--) {
result.push(d.toLocaleString('en', opts));
d.setMinutes(d.getMinutes() + mins);
}
return result;
}
console.log(getTimes(new Date(), 15, 7));
Upvotes: 2
Reputation: 6564
I would recommend you use moment
for this. Even though this can be done by adding little more lines using without moment
, but adding moment
to your project will save time and energy.
<div id="app">
<div v-for="item in timeList" :key="timeList">
<button>{{item}}</button>
</div>
</div>
<script>
new Vue({
el: '#app',
...
...
data: {
timeList: [
],
},
mounted: function(){
const current = new moment();
for(let i=0;i<5;i++){
this.timeList.push(current.format("HH:mm"));
current.add(15, "minutes");
}
}
})
</script>
Check moment here https://momentjs.com/docs/
Upvotes: 0