CODEWITHSUNDEEP
reactjsreact-nativenpm
Venda
Venda

Reputation: 167

date picker npm doesn't work in react native

I'm trying to make a date picker app using react-native-modal-datetime-picker I'm using a button to open the time picker but it doesn't pop up as I expected

This is my constructor props

constructor (props) {
      super(props);
      this.state = {
         cdate: '',
         setDate: '',
         isVisible: false,
         setVisible: false,

      }

Inside render

render() {

  const { cdate, isVisible, setDate, setVisible } = this.state;

    return (
      <View style={styles.gridContainer}>

              <Text>{cdate}</Text>
      <Button title="Show DatePicker" onPress={() => this.setState({ setVisible: true })} />
             <DateTimePicker
  mode="time"
  isVisible={isVisible}
  cdate={cdate}
  onConfirm={cdate => {
    setDate(cdate.toTimeString());
    setVisible(false);
  }}
  onCancel={() => this.setState({ setVisible: false })}
/>
            </View>
    );
  }
}

The app builds without any errors with the show date picker button but when I press the button it doesn't show the time picker as it should

enter image description here

I don't get the clock in the above picture when I press the button

Upvotes: 0

Views: 1032

Answers (1)

Gaurav Roy
Gaurav Roy

Reputation: 12215

In your <DateTimePicker /> you have written isVisible={isVisible} but in 

Button title="Show DatePicker" onPress={() => this.setState({ setVisible: true })}   ,

you are setting setVisible to true, so in dateTime picker you should replace your code with below snippet , isVisible with setVisible is being replaced

     < DateTimePicker
  mode="time"
  isVisible={setVisible}
  cdate={cdate}
  onConfirm={cdate => {
    this.setState({setDate:cdate.toTimeString(),setVisible:false})
  }}
  onCancel={() => this.setState({ setVisible: false })}
/>

hope it helps. feel free for doubts

Upvotes: 1

Related Questions