Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material-UI pickers - disable past but not show error

Tags:

material-ui

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"}
      />
like image 313
dt1000 Avatar asked Apr 17 '19 19:04

dt1000


People also ask

How to use material UI Pickers with datepicker?

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.

How to import muipickersutilsprovider and keyboarddatepicker in materialui?

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.

How to change the style of the 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.

How do I use material UI components in react?

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.


Video Answer


1 Answers

You can disable all internal validation by passing

<DateTimePicker
  disablePast
  error={false}
  helperText={null}
/>
like image 130
Dmitriy Kovalenko Avatar answered Oct 21 '22 19:10

Dmitriy Kovalenko