react-datepicker icon indicating copy to clipboard operation
react-datepicker copied to clipboard

Exclude Date With Times from date picker

Open MrJoshFisher opened this issue 5 months ago • 0 comments

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.

MrJoshFisher avatar Sep 22 '24 12:09 MrJoshFisher