React-native-modal-datetime-picker: "minimumDate" is not respected if the user confirms the date without changing the initial value

Created on 14 Dec 2018 · 7Comments · Source: mmazzarolo/react-native-modal-datetime-picker

In src/CustomDatePickerIOS/index.js you initialize defaultProps.date to a new Date() and because defaultProps is static, it doesn't generally get recreated every time we display the picker.

Our application requires a minimumDate which is typically 1 day from the instant the user displays the picker.

If the user displays the picker - it shows the minimum date correctly (the underlying iOS picker handles this) but, if the user confirms immediately without changing the date, _handleDateChange never fires in your library and consequently, the state.date that your library returns is the one from defaultProps ... which is NOT the date the picker was displaying and in our case, always less than the minimum date.

At a minimum, we'd like your library to return the date the picker actually displayed and which the user thought they were confirming.

bug

Source

LutherBaker

Most helpful comment

I have solution for temporary not permanent... @LutherBaker @gish94


constructor(props) {
    super(props);
    this.state = {
      changeDate: false,
    };
  }

<DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
          onDateChange={this.datechange} //--> Add this function
          minimumDate={new Date()} // --> your minimun date

        /> 

  datechange = () => this.setState({changeDate: true});
_handleDatePicked = delivery_date => {
    if(Platform.OS == "ios"){
      if(this.state.changeDate == false){
          var fulldate = new Date(); //--> your minimum date
        this.setState({delivery_date : moment(fulldate, "YYYY-MM-DD").format("YYYY-MM-DD")})
      }else {
        this.setState({delivery_date});
      }
    } else {
      this.setState({delivery_date});
    }
  this._hideDateTimePicker();
  };

kartavyaparekh96 on 29 Dec 2018

👍4

All 7 comments

@LutherBaker thank you for submitting the issue report!

Since it seems you figured out how to handle it, are you willing to submitting a PR/initial proposal on how to fix it?

mmazzarolo on 14 Dec 2018

is there any new on this issue?

gish94 on 18 Dec 2018

hey?

gish94 on 23 Dec 2018

Hey @gish94 , unfortunately I don't have much time to investigate and solve the issue but I'm always available for code reviews on pull requests if you find any vialable solution 👍

mmazzarolo on 26 Dec 2018

I have solution for temporary not permanent... @LutherBaker @gish94


constructor(props) {
    super(props);
    this.state = {
      changeDate: false,
    };
  }

<DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
          onDateChange={this.datechange} //--> Add this function
          minimumDate={new Date()} // --> your minimun date

        /> 

  datechange = () => this.setState({changeDate: true});
_handleDatePicked = delivery_date => {
    if(Platform.OS == "ios"){
      if(this.state.changeDate == false){
          var fulldate = new Date(); //--> your minimum date
        this.setState({delivery_date : moment(fulldate, "YYYY-MM-DD").format("YYYY-MM-DD")})
      }else {
        this.setState({delivery_date});
      }
    } else {
      this.setState({delivery_date});
    }
  this._hideDateTimePicker();
  };

kartavyaparekh96 on 29 Dec 2018

👍4

Thanks @kartavyaparekh96 for the workaround. I'm not sure if it makes sense handle this edge case internally in the library, but I'm available for PR/discussion for addressing the case.
Closing!

mmazzarolo on 20 Apr 2019

@mmazzarolo is this bug resolved now or not ?
Because i am also facing this issue and not able to find out any solution for it. Please suggest me what to do.