How to Disable Future Year, Month and Date in RN?

Question

I know there a lots same questions, but none of them work as I need, about to disable future YYYY-MM-DD in React Native Date Picker:

    <DatePicker
      modal
      open={open}
      date={date}
      mode="date"
      onConfirm={updateFilter}
      maximumDate={new Date()}
      onCancel={() => {
        setOpen(false)
      }}
      
    />

But it doesn't work, the future month and date still displayed, only future year is disabled. How to disable all of them?

score 1 · Accepted Answer · answered Sep 16 '22 at 12:06

1

According to the Readme on the repo for react-native-date-picker, the maximumDate prop requires a string in the form YYYY-MM-DD. Therefore you should instantiate a new Date object and store it in a variable on which you can call the various methods you need to access those portions of the Date. Then you can pass that prop a new Date object, and add the pieces of the string you need, like so:

const currDate = new Date();
<DatePicker>
    ...
    maximumDate={new Date(`${currDate.getFullYear()}-${currDate.getMonth() + 1}-${currDate.getDate()}`)}
</DatePicker>

answered Sep 16 '22 at 12:06

Brandon Pelton-Cox

138
8

You can get it into that format without so much clutter: `new Date().toLocaleDateString('en-CA');` – samuei Sep 16 '22 at 13:16
@Brandon: It work, thanks so much Brandon, it was grate tickly holding new Date in string, and then pass maximumDate = {currDate}. As simple as it... – Plipus Tel Sep 19 '22 at 05:24

score 0 · Answer 2 · answered Sep 19 '22 at 05:29

Main DatePicker component:

import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker,
} from '@material-ui/pickers';

export default function DatePicker(props) {

  const { name, value, label, onChange, error, helperText, ...other } = props;

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justifyContent="space-around">
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          label={label}
          name={name}
          value={value}
          onChange={onChange}
          format="dd/MM/yyyy"
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
          {...other}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

Call the DatePicker component:

<DatePicker
    label="Check in date"
    name="to_let_from"
    value={formik.values.to_let_from}
    minDate={updateRecord !== null ? updateRecord['to_let_date'] : new Date()}
    maxDate={new Date().setDate(new Date().getDate() + 60)}
    onChange={value => { formik.setFieldValue("to_let_date", value)}}
    onBlur={formik.handleBlur}
    fullWidth
/>

Version i used here:

@date-io/date-fns": "^1.3.13"

@material-ui/core": "^4.11.3"

@material-ui/pickers": "^3.3.10",

score -1 · Answer 3 · edited Sep 19 '22 at 05:56

class DatePickerContainer extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            startDate: ''

            // Enable this if you want todays date to appear by default
            // startDate: moment()
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(date) {
        this.setState({
            startDate: date
        });
    }

    render() {
        return <DatePicker
            selected={this.state.startDate}
            onChange={this.handleChange}
            placeholderText="MM/DD/YYYY"
        />;
    }
}

How to Disable Future Year, Month and Date in RN?

3 Answers3