We are using: https://material-ui-pickers.dev/
We want to disable past, but not show the error, if a date from the past is in there. The reason is, that when you display the form, yesterday's date is not an error, as it was chosen yesterday. If you select again, you should still not be able to select in the past. Here is the code:
<DateTimePicker
value={selectedDate}
disablePast
onChange={this.handleDateChange}
label={this.props.label}
showTodayButton
helperText={"Required"}
/>
For using the Datepicker component, we also need to install the Material UI Pickers package Install the date-io package to perform various basic date operations Note: For material-ui-pickers v3 use v1.x version of @date-io adapters. There are a number of UI components provided by Material UI package modules.
Import MuiPickersUtilsProvider and KeyboardDatePicker from @material-ui/pickers Also, we need to import the DateFnsUtils used by MuiPickersUtilsProvider component as a utility method provider. Run the application by hitting $ npm start to see a default MaterialUI Datepicker.
The variant property is used to change the style of the Datepicker. There are three types of variants available "dialog" (default), "inline" & "static" The static date picker is placed as an element and copies space. The Dialog variant is displayed in the center of the page, useful for mobile or small interfaces.
Using Datepicker Material UI Components There are a number of UI components provided by Material UI package modules. To use a component we first import it in the React Component. It can be a functional or class component.
You can disable all internal validation by passing
<DateTimePicker
disablePast
error={false}
helperText={null}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With