How do I use the excludeTimes of react-datepicker in a functional component and use the onChange?

Question

The error it says is:

ReferenceError setHours is not defined

These are the codes. Also, how can I use the onChange value for the react-datePicker? Thank you.

import "./styles.css";
import React, { useState } from "react";
import DatePicker from "react-datepicker";

// import required css from library
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        showTimeSelect
        minDate={new Date()}
        excludeTimes={[
          setHours(setMinutes(new Date(), 0), 17),
          setHours(setMinutes(new Date(), 30), 17),
          setHours(setMinutes(new Date(), 30), 18),
          setHours(setMinutes(new Date(), 0), 18),
          setHours(setMinutes(new Date(), 30), 19),
          setHours(setMinutes(new Date(), 0), 19),
          setHours(setMinutes(new Date(), 30), 19),
          setHours(setMinutes(new Date(), 0), 20),
          setHours(setMinutes(new Date(), 30), 20),
          setHours(setMinutes(new Date(), 0), 21),
          setHours(setMinutes(new Date(), 30), 21),
          setHours(setMinutes(new Date(), 0), 22),
          setHours(setMinutes(new Date(), 30), 22),
          setHours(setMinutes(new Date(), 0), 23),
          setHours(setMinutes(new Date(), 30), 23),
          setHours(setMinutes(new Date(), 0), 24),
          setHours(setMinutes(new Date(), 30), 24),
          setHours(setMinutes(new Date(), 0), 1),
          setHours(setMinutes(new Date(), 30), 1),
          setHours(setMinutes(new Date(), 0), 2),
          setHours(setMinutes(new Date(), 30), 2),
          setHours(setMinutes(new Date(), 0), 3),
          setHours(setMinutes(new Date(), 30), 3),
          setHours(setMinutes(new Date(), 0), 4),
          setHours(setMinutes(new Date(), 30), 4),
          setHours(setMinutes(new Date(), 0), 5),
          setHours(setMinutes(new Date(), 30), 5),
          setHours(setMinutes(new Date(), 0), 6),
          setHours(setMinutes(new Date(), 30), 6),
          setHours(setMinutes(new Date(), 0), 7),
          setHours(setMinutes(new Date(), 30), 7),
          setHours(setMinutes(new Date(), 0), 8),
          setHours(setMinutes(new Date(), 30), 8),
        ]}
      />
    </div>
  );
}

And this is the codesandbox code: https://codesandbox.io/s/festive-wescoff-71z8u?file=/src/App.js

What do you mean by use the `onChange` value? Also, what timings you're trying to exclude? — Sohaib, May 27 '21 at 04:41
like save the value of the selected date. Also, I was trying to exclude the time between 5PM to 7AM — JS3, May 27 '21 at 04:46
Selected date is already saved in your state variable `startDate` — Sohaib, May 27 '21 at 05:06
@Sohaib Oh right, just needed to startDate.toDateString() it. But I have this problem with the excludeTimes — JS3, May 27 '21 at 05:10
@Sohaib Hello again, I'm really sorry for disturbing you. I have noticed that the datepicker will just reset after the current date's 5PM. I can still select the date and time for today even if it's past 5PM. - codesandbox.io/s/festive-wescoff-71z8u?file=/src/App.js — JS3, May 27 '21 at 12:49
This is because minTime is greater than maxTime. You need to check if current date is today and time is past 5pm then set default date to tomorrow instead. https://codesandbox.io/s/pedantic-vaughan-dbcy2?file=/src/App.js — Sohaib, May 27 '21 at 15:25

Sohaib · Accepted Answer · 2021-05-27T08:20:52.350

You can use minTime and maxTime props to disable the timings from 5pm to 7am

export default function App() {
  const [startDate, setStartDate] = useState(new Date());

  const onDateChange = (date) => {
    console.log('Save date here', date);
    setStartDate(date);
  };

  return (
    <div className="App">
      <DatePicker
        selected={startDate}
        onChange={onDateChange}
        showTimeSelect
        minDate={new Date()}
        minTime={new Date(0, 0, 0, 7, 30)} // 7:30am
        maxTime={new Date(0, 0, 0, 16, 30)} // 4:30pm
        dateFormat="dd/MM/yyyy hh:mm a"
        timeFormat="hh:mm a"
        timeIntervals={30}
      />
    </div>
  );
}

If you need to enable 7am and 5pm as well then use this:

minTime={new Date(0, 0, 0, 7)} // 7:00am
maxTime={new Date(0, 0, 0, 17)} // 5:00pm

Update: To limit minTime for current date, you need to dynamically calculate minTime

import "./styles.css";
import React, { useState, useMemo } from "react";
import DatePicker from "react-datepicker";

// import required css from library
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());

  // useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
  const minTime = useMemo(() => {
    const todayDate = new Date();
    const selectedDate = new Date(startDate); // create a copy before modifying
    // When current date is selected, set minTime to current time
    if(selectedDate.setHours(0,0,0,0) === todayDate.setHours(0,0,0,0)) {
      return new Date();
    }

    // For other dates return default 7:00am
    return new Date(0, 0, 0, 7);
  }, [startDate]);

  return (
    <div className="App">
      <DatePicker
        selected={startDate}
        onChange={date => setStartDate(date)}
        showTimeSelect
        minDate={new Date()}
        minTime={minTime}
        maxTime={new Date(0, 0, 0, 17)} // 5:00pm
        dateFormat="dd/MM/yyyy hh:mm a"
        timeFormat="hh:mm a"
        timeIntervals={30}
      />
    </div>
  );
}

Thank you, it does work, however, how can I also limit the minimum time based on my current date. Because currently my time here is at 1:14pm but I can still pick the previous times. I've updated the code here too - https://codesandbox.io/s/festive-wescoff-71z8u?file=/src/App.js — JS3, May 27 '21 at 05:16
Sorry for asking again, but I've noticed that the time does not work. Picking the time does not change, it always stays on 12AM - codesandbox.io/s/festive-wescoff-71z8u?file=/src/App.js – — JS3, May 27 '21 at 07:49
Updated the answer. Sorry there was an issue here `startDate.setHours(0, 0, 0, 0)`. Original date was being modified because of this. — Sohaib, May 27 '21 at 08:24

How do I use the excludeTimes of react-datepicker in a functional component and use the onChange?

1 Answers1