antd-mobile的DatePicker日期選擇組件使用

如今項目上有個需求，在時間選擇上須要精確到分鐘，且分鐘只能是0分鐘或者是30分鐘。

使用了antd-mobile的DatePicker組件，具體用法可參考：https://mobile.ant.design/components/date-picker-cn/

 

其中組件有個minuteStep參數，將其設置成30，便可只顯示0分鐘或者30分鐘了。

可是在選擇的時候發現了問題，點擊時間控件，彈出時間選擇的界面，若是不去選擇0分鐘或者30分鐘，直接點擊確認，控件會選擇到當前時間的分鐘數，這是不合理的，解決方法：

參考了https://www.zhihu.com/question/56076235，使用到了moment對象，須要在項目中引入moment.js。增長一個判斷，若是選擇到30分鐘了，即不變。若是不是30分鐘則將分鐘數設置爲0，具體作法以下:

 

                <DatePicker
                    value={this.state.startTime}  minuteStep = {30}
                    onChange={startTime =>  this.setState({startTime:  new Date(startTime).getMinutes() == 30 ? startTime :  moment( new Date(startTime).setMinutes(0) ) })}
                    >
                <List.Item arrow="horizontal"><font color="red"> * </font>開始時間</List.Item>
                </DatePicker>        

 

這樣既可實現。