CODEWITHSUNDEEP
react-nativedatepicker
Taylon Assis
Taylon Assis

Reputation: 343

Datepicker returning to initial value

I'm using react-native-date-picker component to pick date and time values in my app.

In Android it's working fine. But the same code on iOS is having a weird behavior. It is as if there is a range of choices to pick time - 20:10 until 20:25. Then, if it passes this range, the clock goes back inside it or to default initial value (20:10).

GIF explains:

enter image description here

Code:

import React, { Component } from 'react';
import DatePicker from 'react-native-datepicker';

export default class DatePick extends Component {

  constructor(props){
    super(props)
    this.state = {
      param: ''
    }

  }

  render(){
    return (
      <DatePicker
        style={{width: 200, borderRadius: 5}}
        date={this.state.param} // date field
        mode={"time"}
        placeholder={"Hora Final"}
        format={"H:mm"}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        showIcon={false}
        locale={'pt-br'}
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36
          }

        }}
        onDateChange={(selected) => {
          this.setState({
            param: selected,
          });
          this.props.atualizarDatas(this.props.tipo, selected); // method that update the date field
        }
      }
      />
    )
  }
}

Upvotes: 3

Views: 2845

Answers (2)

Sathis Sakthivel
Sathis Sakthivel

Reputation: 79

Format props wrong .

Try this 

<DatePicker
 ...
 format="h:m A"

....

....


/>

Upvotes: 0

Taylon Assis
Taylon Assis

Reputation: 343

Somehow minDate and maxDate props are causing this misfortune.

Remove it and component works fine.

Upvotes: 2

Related Questions