How to set min date in TimePickerAndroid for react-native

别来无恙 提交于 2019-12-10 19:44:31

问题


I created a simple form with react-native using this library with start time and end time. I was asking my self why I can set with no problem the start time and end time on ios, but I cannot set it in android when I found in the official documentation that it isn't expected the min time option. Does exist any workaround or some hack to solve this problem?
The code is so similar to the one in the example so I didn't provide it, but in the case I can edit the message. Thanks


回答1:


According to the documentation, for the react-native-datepicker, minDate is not supported for the Android. It works fine for ios.

Note : Use the "datetime" value for the prop-mode.

I followed the method below to overcome the issue in android.

                    <DatePicker
                      style={{width: 200}}
                      date={this.state.valueDate}
                      mode="datetime"
                      format="YYYY/MM/DD HH:mm"
                      minDate={new Date(Date.now()+(10 * 60 * 1000))}   //To book after 10 minutes
                      confirmBtnText="Confirm"
                      cancelBtnText="Cancel"
                      customStyles={{
                        dateIcon: {
                          position: 'absolute',
                          left: 5,
                          top: 4,
                          marginLeft: 10
                        },
                        dateInput: {
                          marginLeft: 46
                        }
                        // ... You can check the source to find the other keys.
                      }}
                      onDateChange={(date) => {   // returns 2019-10-15T23:23 - set in format prop
                        var selectedDate = new Date(date);
                        var dateNow = new Date();
                        var YYYY = dateNow.getFullYear();
                        var MM = dateNow.getMonth()+1;
                        var DD = dateNow.getDate();
                        var HH = dateNow.getHours();
                        var mm = dateNow.getMinutes()+10;   //To book after 10 minutes
                        var minDate = new Date(YYYY+'/'+MM+'/'+DD+' '+HH+':'+mm)

                        var selectedYYYY = selectedDate.getFullYear();
                        var selectedMM = selectedDate.getMonth()+1;
                        var selectedDD = selectedDate.getDate();
                        var selectedHH = selectedDate. getHours();
                        var selectedmm = selectedDate.getMinutes();

                        if(Platform.OS == 'ios'){
                          this.setState({
                            valueDate:date,
                            date: selectedYYYY+'-'+selectedMM+'-'+selectedDD,
                            time: selectedHH+':'+selectedmm
                          })
                        }else{
                          if(selectedDate.getTime()<minDate.getTime()){   //getTime() - Get the time (milliseconds since January 1, 1970)
                            alert("You can book after 10 minutes from now!");
                          }else{
                            this.setState({
                              valueDate:date,
                              date: selectedYYYY+'-'+selectedMM+'-'+selectedDD,
                              time: selectedHH+':'+selectedmm
                            })
                          }
                        }

                      }
                        }

                    />

Hope it will help!!



来源:https://stackoverflow.com/questions/49999476/how-to-set-min-date-in-timepickerandroid-for-react-native

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!