Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set min date in TimePickerAndroid for react-native

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

like image 478
michoprogrammer Avatar asked Oct 17 '22 19:10

michoprogrammer


1 Answers

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!!

like image 193
Angathan Nesarasa Avatar answered Oct 22 '22 05:10

Angathan Nesarasa