CODEWITHSUNDEEP
reactjsmaterial-uidatetimepicker
natpas
natpas

Reputation: 23

DateTimePicker Material UI set minDate 30 minutes from now

I'm using Material UI DateTimePicker and am trying to set a minimum date to 60 minutes from now and can't figure out what's the right syntax to do it. The way I have it now doesn't work. I tried using minTime instead as I saw that in one tutorial but that gave me a warning:

React does not recognize the `minTime` prop on a DOM element

Could someone tell me what's the right syntax to set the time to 60 minutes from now?

My DateTimePicker:

<MuiPickersUtilsProvider utils={DateFnsUtils}>
            <DateTimePicker
              required={true}
              id="select-due-date-time"
              label="Due date"
              name="dueDateTime"
              disablePast
              error={materialDateTimeInputError}
              value={dueDateTime}
              onChange={handleDateChange}
              minDate={new Date().getMinutes + 60}
              minDateMessage={"Due date must be at least 60 minutes from now"}
              helperText="Please select the due date for your request"
            />
          </MuiPickersUtilsProvider>

I also tried something like this but it also didn't work minDate={new Date(new Date().getMinutes + 60)}

EDIT: I tried using minDate={new Date(new Date().getTime() + 60*60*1000)} as someone suggested in the comment. Unfortunately, that didn't work. Is it even possible to set control minTime's minutes? So far this attribute only worked for me for days.

Upvotes: 0

Views: 5710

Answers (2)

Sourbh Gupta
Sourbh Gupta

Reputation: 833

Meterial Ui now support for minDateTime to validate minimum time with date.

Documentation - meterial-ui DateTimePicker

Upvotes: 0

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

I had the same problem and I can confirm that minDate works only for days and not for hours/minutes/seconds.

Here an example.

If you write in minDate something like:

<DateTimePicker
    value={this.state.date || Date.now()}
    onChange={this.handleDateChange}
    format="hh:mm DD.MM.YYYY"
    autoOk
    ampm={false}
    minDate={new Date().setHours(new Date().getHours() + 1)}
  />

gives you the same result as:

<DateTimePicker
    value={this.state.date || Date.now()}
    onChange={this.handleDateChange}
    format="hh:mm DD.MM.YYYY"
    autoOk
    ampm={false}
    minDate={new Date()}
  />

I tried mutiple times (also by using moment) but the result is the same. A possible workaround could be verify the date in onChange event and display an error if date is less than one hour from now (poor but is the only way I found).

Upvotes: 1

Related Questions