CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
iamredpanda
iamredpanda

Reputation: 103

disabling future dates in material ui datepicker

How can we disable future dates from the material UI datepicker. What I see is that it does not accept any proptypes as disableFuture or past.

Here is the github link to the repo sandboxlink

Upvotes: 2

Views: 7298

Answers (2)

Shankar kota
Shankar kota

Reputation: 111

You can add InputProps={{ inputProps: { max: "2017-05-29" } }} to your <TextField /> then it will work. For example I took "2017-05-29" is the maximum date. I have updated the same in the sandbox provided by you.

<form className={classes.container} noValidate>
    <TextField
        id="date"
        label="Birthday"
        type="date"
        defaultValue="2017-05-24"
        InputProps={{ inputProps: { max: "2017-05-29" } }}
        className={classes.textField}
        InputLabelProps={{ shrink: true }}
    />
</form>

Upvotes: 3

Dhiren
Dhiren

Reputation: 163

Currently material picker component not fully implemented. Still its uses native input type element. So you can't pass date restriction for future and past. Another way you will create the helper function for the input and validate on each date selection.

But I will suggest better to use this library https://material-ui-pickers.firebaseapp.com/installation suggested by material documentation page.

for reference look the documentation.

https://material-ui.com/demos/pickers/#date-pickers

Upvotes: 0

Related Questions