Question 34653 in React native Question posted in
The official React Native documentation can be found here.

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

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?

Tags:

3

Answers


  1. 0 
    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"
        />;
    }
}
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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",

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search