How to disable dates more than 1year from the current date in the datetime-local TextField

Question

My objective is to disable the past days and more than 1 year from the current date, it is working for past days but couldn't disable more than 1 year from the current date, I've tried but didn't worked.

Here is the code:

<TextField
  variant="outlined"
  id="datetime-local"
  label="Select Date and Time"
  placeholder="Select Date and Time"
  type="datetime-local"
  value={this.state.DateTime}
  InputLabelProps={{
    shrink: true,
  }}
  inputProps={{
    min: new Date().toISOString().slice(0, 16),
  }}
  onChange={this.HandleChange}
/>

For example: today's date is 04-15-2021, then it should enable 1 year dates based on the current date i.e., 04-15-2022. Can anyone help me in this query? Thanks! in advance

See [this](https://stackoverflow.com/questions/11649672/find-out-the-previous-year-date-from-current-date-in-javascript/11649716) question. — NearHuscarl, Apr 15 '21 at 10:21
@NearHuscarl - I have given max: new Date.getFullYear() but it didn't worked — Sanjana, Apr 15 '21 at 10:23
`new Date().getFullYear()` returns a year number, you need to convert it back to `Date`. Have a look at the second answer. — NearHuscarl, Apr 15 '21 at 10:33

score 1 · Accepted Answer · answered Apr 15 '21 at 10:34

You can create maxDate by adding a year to today's date:

const d = new Date();
const maxDate = new Date(d.getFullYear() + 1, d.getMonth(), d.getDate());

and use the max in the inputProps:

inputProps={{
  min: d.toISOString().slice(0, 16),
  max: maxDate.toISOString().slice(0, 16)
}}

How to disable dates more than 1year from the current date in the datetime-local TextField

1 Answers1