时间戳

首页 > 解决方案 > 如何使用 Vue.js 根据当前日期/时间设置时间间隔

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

问题描述

假设当前日期/时间是 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 分钟间隔

标签： javascriptdatetimevue.jsvuetify.jsbootstrap-vue

解决方案

如果当前时间是 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));

推荐阅读