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

Posted 2023-02-22

【中文标题】如何使用 Vue.js 根据当前日期/时间设置时间间隔

【英文标题】：How can I set a time interval based on current date/time using 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

【参考方案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/