react-datepicker
react-datepicker copied to clipboard
Exclude Date With Times from date picker
I know from the docs that you can exclude dates and exclude times separately from the date picker but how can one exclude a date AND time
Example in firebase I have a selection of bookins with teims e.g September 24, 2024 at 1:00:00 PM UTC+1
Im pulling the dates from the bookings and excluding times in my calendar:
.const filterBookedTimes = (bookedSlots) => {
// For now, just return all booked slots' times, regardless of date
return bookedSlots.map((slot) => {
const slotDate = new Date(slot.startDateTime.seconds * 1000);
const excludedTime = new Date();
excludedTime.setHours(slotDate.getHours(), slotDate.getMinutes(), 0, 0);
return excludedTime;
});
};`
<DatePicker
selected={startDateTime}
onChange={(date) => setStartDateTime(date)}
minDate={new Date()} // Start from today
maxDate={new Date(new Date().setMonth(new Date().getMonth() + 1))}
showTimeSelect
timeIntervals={60}
minTime={new Date(new Date().setHours(8, 0))} // Fix this
maxTime={new Date(new Date().setHours(17, 0))} // Fix this
dateFormat="Pp"
className="border border-gray-300 disabled:border-gray-500 rounded-md p-2 block w-full text-black"
disabled={message}
placeholderText={'Please select a date and time'}
excludeTimes={filterBookedTimes(bookedSlots)}
/>
But how can I can combine the 2 to exclude a time on a date but not exclude the day entirely?
I wouldn't day this was a bug but possibly overlooked.