項目要求,在時間選擇上須要精確到分鐘,且分鐘只能半小時,既0分鐘或者是30分鐘。antd
前期引用的時間控件是antd-mobile的DatePicker組件,具體用法可參考:https://mobile.ant.design/components/date-picker-cn/this
其中組件有個minuteStep參數,將其設置成30,便可只顯示0分鐘或者30分鐘了。spa
可是在選擇的時候發現了問題,點擊時間控件,彈出時間選擇的界面,若是不去選擇0分鐘或者30分鐘,直接點擊確認,控件會選擇到當前時間的分鐘數,這是不合理的,解決方法:code
使用到了moment對象,須要在項目中引入moment.js。增長一個判斷,若是選擇到30分鐘了,即不變。若是不是30分鐘則將分鐘數設置爲0,具體作法以下:component
1 <DatePicker value={this.state.startTime} minuteStep = {30} 2 onChange={startTime => this.setState({startTime: new Date(startTime).getMinutes() == 30 ? startTime : moment( new Date(startTime).setMinutes(0) ) })}> 3 <List.Item arrow="horizontal"><font color="red"> * </font>開始時間</List.Item> 4 </DatePicker>