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>        

 

這樣既可實現。