React-native-modal-datetime-picker: Automatically disabled the before time from current time

[harikanammi]

I am using this module, it's all working fine. I am running a sample app. If i pick a time from the time picker automatically it disables the before time from the current time.

Here is my code:

class ModalDatePicker extends Component {
  constructor(props){
      super(props);
      this.state={
         isTimePickerVisible: false,
         currentTime:moment().format('h:mm a').toUpperCase()
      }
    }
    _showTimePicker = () => this.setState({ isTimePickerVisible: true });

   _hideTimePicker = () => this.setState({ isTimePickerVisible: false });

   _handleTimePicked = (time) => {
     var time = moment(time).format("hh:mm a");
       this.setState({
         currentTime : time.toUpperCase()
       },()=>{
         if(this.state.currentTime < time){
          this.setState({
            currentTime : this.state.currentTime
          })
         }
       })
     this._hideTimePicker();
   };

render(){
      return(
  <View style = {styles.buttonView}>
        <TouchableOpacity onPress={this._showTimePicker}>
        <View style ={styles.pickUpBorderView}>
        <Text>Pickup Time {this.state.currentTime}</Text>
        <DateTimePicker
          isVisible={this.state.isTimePickerVisible}
          onConfirm={this._handleTimePicked}
          onCancel={this._hideTimePicker}
          mode = {'time'}
        />
        </View>
        </TouchableOpacity>
        </View>
)}
}

Here is my screenshot

Please give any suggestion for this issue. Thank you

[mmazzarolo]

Hey @harikanammi,
I'm sorry but I can't understand the issue 😞
Could you please explain the following sentence a bit more?

it disables the before time from the current time

Thanks!

[harikanammi]

I want to disabled the completed time in the time picker, thank you for your response

[mmazzarolo]

I still don't get it, sorry.
Under the hood react-native-modal-datetime-picker uses react-native original DatePickerAndroid, TimePickerAndroid and DatePickerIOS.
Could you try swapping react-native-datetime-picker with react-native original date/time pickers to check if the problem persists?

[harikanammi]

I want to disable the previous time in the time picker. It enables only future time in the time picker. Time picker displays only current time to future time.

[mmazzarolo]

You should provide the minimumDate to the picker just like you would do with DatePickerIOS.

[harikanammi]

This is my code.

    <DateTimePicker
      isVisible={this.state.isTimePickerVisible}
      onConfirm={this._handleTimePicked}
      is24Hour = {true}
      onCancel={this._hideTimePicker}
      mode = {'time'}
    />

`` How can i give thisminimumDate` into my code.

[mmazzarolo]

<DateTimePicker
      isVisible={this.state.isTimePickerVisible}
      onConfirm={this._handleTimePicked}
      is24Hour = {true}
      minimumDate={your minumum date}
      onCancel={this._hideTimePicker}
      mode = {'time'}
    />

[harikanammi]

  <DateTimePicker
          isVisible={this.state.isTimePickerVisible}
          onConfirm={this._handleTimePicked}
          is24Hour = {true}
          onCancel={this._hideTimePicker}
          mode = {'time'}
          minimumDate = {this.state.currentTime}
        />

I am getting this error.

[mmazzarolo]

<DateTimePicker
          isVisible={this.state.isTimePickerVisible}
          onConfirm={this._handleTimePicked}
          is24Hour={true}
          onCancel={this._hideTimePicker}
          mode={'time'}
          minimumDate = {new Date()}
        />

Does this work? It should not allow you to select a date before the current moment

[harikanammi]

Thank You for your support, it's working

[mmazzarolo]

👍 have fun!

you might need to tweek it a bit to make it better suit your tastes

[bilalyaqoob]

I have an issue using this modal i just need date from 1 to 18 date it is showing correct result but after 18 date it start showing me day name and time.