javascript - 如何从值 1 AM , 1 :30 AM and so on? 创建选择列表

Question

创建一个 React 应用程序，在其中我使用下拉菜单和菜单项来创建一个选择列表，其值为 1:00 AM、1:30 AM，依此类推，直到第二天凌晨 12:00。

我创建了一个基本逻辑并将其发布在 js fiddle
Fiddle link with basic logic for select

我们可以做得更好吗，它可以工作，但很困惑，还有其他方法吗

$(function(){
    let i = 1;
    while(i <= 24) {
      let amPmCaption = i < 12 ? 'AM' : 'PM';
      let timeValue = i <= 12 ? i : i-12;
      $("select").append("<option>" + `${timeValue}: 00 ${amPmCaption}` + "</option>");
      $("select").append("<option>" + `${timeValue}: 30 ${amPmCaption}` + "</option>");
      i++;
    }
 })

有没有更好的方法来实现这一点，最后我得到的是下午 12:00 而不是上午 12:00。

相同的 react 代码使用 Material UI 中的 menuitem 和下拉列表

getTimeSlotList() {
    let i = 1;
    let menuItems = [];
    while(i <= 24) {
      let amPmCaption = i < 12 ? 'AM' : 'PM';
      let timeValue = i <= 12 ? i : i-12;
      console.log('value of i = ', i);
      menuItems.push(
        <MenuItem key={i} value={i} primaryText={`${timeValue}: 00 ${amPmCaption}`} />,
        <MenuItem key={i*10} value={i*10} primaryText={`${timeValue}: 30 ${amPmCaption}`} />
      )
      i++;
    }
    return menuItems;
}

React jsx 代码是

 <SelectField value={this.state.period} onChange={this.updateStartTime}>
    {this.getTimeSlotList()}
 </SelectField>

Answer 1

正如您所说，您正在使用material-ui，那么我建议使用带有minutesStep={30}的TimePicker组件。请参阅文档 here .

这可能比选择更用户友好。