2

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

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
iamredpanda
  • 113
  • 3
  • 11

2 Answers2

3

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>
Shankar kota
  • 111
  • 6
  • No .it doesn't work fine .If you click on the upside arrow you can still move to the dates after the maximum dates so it does not serve the purpose . – iamredpanda Oct 22 '18 at 08:41
  • If you click up arrow it will increase date, but it will not accept the date while submitting form. Please check HTML5 date inputs for clarity. – Shankar kota Oct 22 '18 at 09:05
  • Can we disable this function where no change gets reflected on clicking arrow up after the max date . – iamredpanda Oct 22 '18 at 09:10
  • Please go here https://stackoverflow.com/questions/11418289/remove-background-arrow-from-date-input-in-google-chrome-v20, it is for removing those arrows. – Shankar kota Oct 22 '18 at 09:12
0

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

Dhiren
  • 163
  • 1
  • 10