1

I'd like to set my calendar maxDate 18 years before today and also set minDate 99 years ago from today. How can i achieve that? I have already set maxDate to today `

constructor(props) {
    super(props);
    //set value in state for initial date
    this.maxDate = new Date();

    this.state = { date: new Date() };   

  }

  render() {

return (
  <View >
    <DatePicker
      style={styles.placeHolder}
      date={this.state.date} //initial date from state
      mode="date" //The enum of date, datetime and time
      placeholder="select date"
      format="DD-MM-YYYY"
      minDate="01-01-1930"
      maxDate={this.maxDate}
      showIcon={false}
      confirmBtnText="Confirm" 
      cancelBtnText="Cancel"
      onDateChange={date => {
        this.setState({ date: date });
      }}
    />
  </View>
);

}`

T.M.
  • 35
  • 2
  • 7

1 Answers1

0

so the topic is slightly dated but for those who use DatePicker after long research on Stack Overflow and Github, I found a solution, you call 'moment' which calls the current date in JS desc: https://zetcode.com/javascript/momentjs/

after declaring the current date you subtract 18 years from the current date with maxDate={moment().subtract(18, "years")._d}


const InputDate = () => {
  const moment = require("moment");

  const [date, setDate] = useState();

  return (
    <View>
      <DatePicker
        date={date}
        mode="date"
        placeholder={placeholder}
        format="YYYY-MM-DD"
        minDate={moment().subtract(100, "years")._d}
        maxDate={moment().subtract(18, "years")._d}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            display: "none",
          },
          dateInput: {
            borderWidth: 0,
          },
          placeholderText: {
            color: "gray",
          },
        }}
        onDateChange={(date) => {
          setDate(date);
        }}
      />
    </View>
  );
};

export default InputDate;

StackOverflow : React-datepicker: enable to set date only if it 18 years old and above

Github : https://github.com/HarshitMadhav/reactLearn/blob/master/validate%20datepicker%2018%20years%20old

I'm a junior in the dev world, I hope this can help you, it worked for me

SalimH
  • 1