React-datepicker minTime and maxTime not works

Question

I have DatePicker on my form and;

i'm using this package: [https://reactdatepicker.com/#example-specific-time-range][1]

on the selection start date: I want to make disable all times before the current time. So if now 3 AM. before hours (2 AM, 1 AM, 12 AM) will be disabled.

Usually, it's making like that: But here they write static time, I want to add there current hour of the current time.

<DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeSelect
      minTime={setHours(setMinutes(new Date(), 0), 17)}
      maxTime={setHours(setMinutes(new Date(), 30), 20)}
      dateFormat="MMMM d, yyyy h:mm aa"
    />

So i saw some examples about that and trying this:

const now = moment().toDate();

<DatePicker
                    selected={this.state.startDate}
                    onChange={event => this.getStartDate(event)}
                    showTimeSelect
                    timeFormat="haa"
                    timeIntervals={60}
                    minDate={now}
                    minTime={now.hours(now.hour()).minutes(now.minutes())}
                    maxTime={now.hours(23).minutes(45)}
                    dateFormat="MM/d/yyyy hhaa"
                    timeCaption="Hour"
                  />

but nothing happened. Where I make a mistake?

score 6 · Answer 1 · edited Jul 16 '21 at 14:23

Filtering passed times works for me using the filterTime prop. Here's a link to the snippet from the docs:

https://reactdatepicker.com/#example-filter-times

Essentially, this is what you need to do:

() => {
  const [startDate, setStartDate] = useState(null);
  
  const filterPassedTime = (time) => {
    const currentDate = new Date();
    const selectedDate = new Date(time);

    return currentDate.getTime() < selectedDate.getTime();
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeSelect
      filterTime={filterPassedTime}
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

You also won't need to use any external libraries e.g. date-fns

Teddy Sterne · Answer 2 · 2020-01-20T16:09:06.290

1

You can use the libraries built in time functions to set the time correctly. Since the min hours is the current hour that you want then you only need to use setMinutes to set the minutes back to 0. The resulting code should look something like this:

<DatePicker
  selected={now}
  onChange={event => this.getStartDate(event)}
  showTimeSelect
  timeFormat="haa"
  timeIntervals={60}
  minDate={now}
  minTime={setMinutes(now, 0)}
  maxTime={setHours(setMinutes(now, 45), 23)}
  maxDate={now}
  dateFormat="MM/d/yyyy hhaa"
  timeCaption="Hour"
/>

Checkout a demo here: https://stackblitz.com/edit/react-time-picker-demo

edited Jan 20 '20 at 16:09

answered Jan 20 '20 at 16:00

Teddy Sterne

13,774
2
46
51

I am using react-datepicker as follows But i am unable to get it work, it does not disable any time ...please help – sk215 Mar 27 '20 at 21:02
You need to make sure that you also provide values for `minDate` and `maxDate`. Without these values all days will be available but some times will be disabled. – Teddy Sterne Mar 30 '20 at 12:11

React-datepicker minTime and maxTime not works

2 Answers2