午前1時、午前1時30分などの値から選択リストを作成する方法は？

Question

私はドロップダウンメニュー項目を使用して午前1時、午前1時30分などの選択リストを作成して翌日の午前12時まで、反応アプリを作成します。

私は基本的なロジックを作成し、
Fiddle link with basic logic for select

は、我々はそれを改善することができますjsのフィドルにそれを掲載している、それが動作しますが、それは厄介だ、他の方法

$(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を取得しています。材料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; 
} 

はあなたが材料-UIを使用していると言ったようJSXコードが

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

Answer 1

で反応して、その後、私が推薦しますminutesStep={30}のTimePickerコンポーネントを使用します。ドキュメントhereを参照してください。

これは、選択よりもユーザーフレンドリーな傾向があります。