antd-mobile的DatePicker分鐘精度半小時

項目要求,在時間選擇上須要精確到分鐘,且分鐘只能半小時,既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>
相關文章
相關標籤/搜索