如何從值1 AM，1:30 AM等創建一個選擇列表？

Question

創建一個反應應用程序，我在其中使用下拉菜單項創建一個值爲1:00 AM，1:30 AM等的選擇列表，直到第二天中午12:00。

我創建了一個基本的邏輯，並張貼在JS小提琴
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 PM而不是12:00 AM。

陣營代碼同樣是使用菜單項和下拉從材料UI

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

陣營JSX代碼

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

Answer 1

正如你說你正在使用的材料的UI，那麼我會建議使用TimePicker組件與minutesStep={30}。請參閱文檔here。

這可能比select更方便用戶使用。