Question

我想在36小时内创建一个二维的日期和时间数组。

我想要获得的输出是：

Wed 18th
  00:00am
  01:00am
  02:00am
  03:00am
  ...
  22:00pm
  23:00pm
Thur 19th
  00:00am
  01:00am
  02:00am
  03:00am
  ...

...直到我们打了36个小时。我想为表单创建一个select的{{1}}。

基本上，当前日期时间范围和接下来几天的时间范围都是给定的。

到目前为止，我有这个：

optgroup

这给了我一系列日期和时间。

我试图按天值分组以实现上述输出，但无法实现。

这是我到目前为止的内容-虽然坏了。

const start = moment().startOf('day');

const times = [];

let hours = 36 * 60;

for (let i = 0; i < hours; i += 1) {
    const value = moment(start).add(60 * i, 'minutes');

    const time = {
        value: value.format('HH:mm A'),
        label: value.format('ddd, Do, HH:mm A'),
        day: value.format('ddd, Do'),
    };

    times.push(time);
}

我的let daysTimes = []; times.forEach((time) => { daysTimes.push(time.day); }); daysTimes = _.uniq(daysTimes); times.forEach((time) => { if (daysTimes[time.day] === time.day) { daysTimes[time.day].push(time); } }); console.log(daysTimes);数组只有两天了。没有时间。

我正在使用daysTimes库。

Answer 1

不是使用平面数组，而是将带有天的对象用作键和值的数组。然后迭代该对象以构建<select>

const start = moment().startOf('day');

const groups = {};// change to object

let hours = 36;

for (let i = 0; i < hours; i += 1) {
  const value = moment(start).add(60 * i, 'minutes');
  // get day for object key
  const day = value.format('MMM D');
  // add day property if it doesn't exist
  groups[day] = groups[day] || [];

  const time = {
    value: value.format('HH:mm A'),
    label: value.format('ddd, Do, HH:mm A'),
    day: value.format('ddd, Do'),
  };
  // push hour object to day array
  groups[day].push(time);
}

Object.entries(groups).forEach(day => {
  const optGroup = document.createElement('optgroup')
  optGroup.label = day[0];
  day[1].forEach(h => {
    optGroup.appendChild(new Option(h.label, h.value))
  })
  document.getElementById('sel').appendChild(optGroup)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<select id="sel"><option></option></select>

Javascript / Moment-按对象值对数组进行分组

1 个答案: