How to set min date in TimePickerAndroid for react-native

Question

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

Try the following library, it works in both android and iOS, and you can easily set the min date in date-picker, https://github.com/mmazzarolo/react-native-modal-datetime-picker — Patrick R, Apr 25 '18 at 05:29
@PatrickR the min date works, but the min time doesn't, so the problem isn't fixed. Do you have any advice? — michoprogrammer, May 01 '18 at 06:53
Sure! The "min date" works perfectly, the "min time" doesn't. If I set the min date, for example 05/02/2018, I can't set a date before that day. If I set the min time "09:30 am", I can set "08:00 am" and I don't want this behaviour. In the library that you said you can read that "minimumDate Date - Min Date. Does not work with 'time' picker on Android". — michoprogrammer, May 02 '18 at 07:29
What I'm trying to say is, in your time-picker try setting minDate object as current date + min time you want to provide. As per your example you have to set Date d = new Date(); d.setHours(09); d.setMinutes(30); and then add the date d to minimumDate — Patrick R, May 02 '18 at 10:35

Angathan Nesarasa · Answer 1 · 2019-10-17T04:47:10.987

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

How to set min date in TimePickerAndroid for react-native

1 Answers1

Linked