How to disable dates in date type <TextField> component in Material UI

JavaScript
1

Hi,

So I have 2 material UI textfield component: start date and end date.
I want all the end dates which are less than the start date to be disabled. I am trying to find a way but couldn’t. Tried using min attribute but it didn’t work. Any other suggestions?

I am working on this app > https://codesandbox.io/s/sharp-sun-9p1w5?file=/src/App.js and the 2 components can be found between lines 185-201.

Any help would be appreciated. Thanks for advance.

1 Like
2

I think what you are looking for is a dedicated package from Material-UI for pickers.

@material-ui/pickers

There in docs you will find DatePicker component that accepts minDate and maxDate :wink:

1 Like
3

Hi, At this point, I don’t want to use it actually. I am new to react and not ready to learn hooks which is what datepicker a lot about.
Any other way that you can think of?

4

As a side issue, you may have an problem here, because basically every current version of every major library has a hooks API, and almost every useful tutorial written in the last couple of years uses hooks, and the core documentation is hooks-first.

Edit: if you are trying to learn React, is it a good idea to try to dump a library in when you don’t understand the API of the core library? If you’re just trying to build something to get it out the door, then that’s understandable (at which point you just follow the instructions in the library), but if you’re trying to actually learn React it would make more sense to try to implement this yourself.

1 Like
5

Okay, I’ve found the solution using native date picker.

If you want to use min or max attribute you have to pass it through inputProps

<TextField 
  type="date"
  inputProps={{
    min: "2020-10-10"
  }}
/>

Just make sure that the format corresponds to the type of the input.

<input type="date" value="2017-06-01">
<input type="datetime-local" min="2018-06-07T00:00">

TextField API

1 Like
6

First of all, my apologies for the late reply.

ok, I am lost here. So I want to learn react and get better at it. What do you suggest here?

if I understood it correctly, Hooks are a little advance topic to cover in the beginning right? And that is why I am refraining myself from using that. At this point I do feel a little bit more comfortable with components, props, state.

1 Like
7

ok, this is what I was missing. inputProps. I think I should start reading the documentation more closely.
Thank you for this and my apologies for the late response.

1 Like
8

That’s fine. But I assume you’re just using the class API, hooks aren’t some advanced thing you then go onto, they’re just an alternative, they provide the same functionality. Components, props, state, all exactly the same whether you use class API or hooks API

What I mean is that if your aim is to learn a library, gluing more complicated stuff on top of it before you know it fully is often going to make things harder

React has a very small API – there aren’t a huge amount of syntactic things to learn to use in the core library, so understanding those and being able to comfortably use them means that any libraries you want to use on top of React are normally much much easier to understand

1 Like
9

That makes total sense and you are right, I should now delve into hooks and context which I have been stalling for a later time. Thank you for your detailed explanation! means a lot!