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
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>
);
}