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

【问题标题】：How can I set a time interval based on current date/time using Vue.js如何使用 Vue.js 根据当前日期/时间设置时间间隔
【发布时间】：2020-07-10 04:29:58
【问题描述】：

假设当前日期/时间是 03/29/2020 02:10 PM。然后我想显示 7 组时间，间隔为 15 分钟，分别是 01:30 PM、01:45 PM、02:00 PM、02:15 PM、02:30 PM、02:45 PM 和 03:00 PM .

Current Date/Time =  03/29/2020 02:10 PM

<div :key="timeList">
      <button>{{timeList}}</button>
</div>

如何将 timeList 中的七组时间显示为 currentTime 的 15 分钟间隔

下午01:30
01:45 下午
下午02:00
下午02:15
下午02:30
02:45 下午
下午03:00

【问题讨论】：

标签： javascript datetime vue.js vuetify.js bootstrap-vue

【解决方案1】：

如果当前时间是 02:10，则下一个 15 分钟块从 02:15 开始。

无论如何，您可以使用内置的格式化函数来获得适当的格式，例如

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

【讨论】：

这是我在 Vue JS 上的第一个项目，所以只是想弄清楚该函数是否应该在 monuted 或方法中？

【解决方案2】：

我建议您为此使用moment。尽管这可以通过在不使用 moment 的情况下添加更多行来完成，但是在您的项目中添加 moment 将节省时间和精力。

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

在这里查看时刻https://momentjs.com/docs/

【讨论】：