React Material-UI Cookbook

How it works...

Let's start by taking a look at the date picker TextField component:

<TextField  value={date}  onChange={onChange}  label="My Date"  type="date"  className={classes.textField}  InputLabelProps={{    shrink: true  }}/>

Most of the date picker functionality comes from the type property that is set to date. This applies the input mask and the native browser date picker control. Because of the input mask value, the shrink input property needs to be true to avoid overlap. The value property comes from the state of the UsingDatePickers component. This value defaults to an empty string, but it needs to be in a specific format. The date picker text field will put the date value in the correct format, so the onChange() handler doesn't actually ...