Textfield type date in React

Question

I have a requirement to display start and end-date in material UI. The end-date field must not allow users to select before dates from selected start-date. I am using text field type date material UI, but is not working. please help

<TextField 
    type="date"
    defaultValue={moment().format("yyyy-mm-dd")}  
    onChange={endDate}
    InputProps={{
       min: "2020-01-04",
    }}
/>

Does this answer your question? [limit a select dates in date range picker and disable other days javascript Set maximum date dynamically](https://stackoverflow.com/questions/64255771/limit-a-select-dates-in-date-range-picker-and-disable-other-days-javascript-set) — Randy Casburn, Jan 06 '21 at 20:17

score 1 · Accepted Answer · answered Jan 06 '21 at 20:21

1

Try the following code snippet. It should do the trick.

<TextField
  InputProps={{inputProps: { min: "2020-05-01", max: "2020-05-04"} }}
/>

answered Jan 06 '21 at 20:21

Zahid Hasan

527
4
11

Excellent, thanks for you help. I changed your code, since I am getting date from state variable InputProps={{ inputProps: { min: `${startDate}`, max:""}, }} it worked. thank you – mural Jan 06 '21 at 20:29

score 0 · Answer 2 · answered Jan 06 '21 at 20:24

The onChange prop always accepts a function to invoke when input's content changes. It propagates a html event, eg.

<TextField 
    type="date"
    defaultValue={moment().format("yyyy-mm-dd")}  
    onChange={(e) => console.log(`your input's value is: ${event.target.value}`) }
    InputProps={{
       min: "2020-01-04",
    }}
/>

Textfield type date in React

2 Answers2