如何使用 Vue.js 根据当前日期/时间设置时间间隔

Question

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

• 01:30 PM
• 01:45 PM
• 02:00 PM
• 02:15 PM
• 02:30 PM
• 02:45 PM
• 03:00 PM

Answer 1

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, eg

 /* ** @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, eg 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));

Answer 2

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/