react-calendar
react-calendar copied to clipboard
Time dependence selects different dates
Before you start - checklist
- [X] I followed instructions in documentation written for my React-Calendar version
- [X] I have checked if this bug is not already reported
Description
let me preface this by saying I think THIS is how calendar dates should be returned:
[
"2024-01-28T07:00:00.000Z",
"2024-01-29T07:00:00.000Z",
"2024-01-30T07:00:00.000Z",
"2024-01-31T07:00:00.000Z",
"2024-02-01T07:00:00.000Z",
"2024-02-02T07:00:00.000Z",
"2024-02-03T07:00:00.000Z"
],
I think that if there is a calendar control that deals with dates .. .the hours - minutes - seconds should not "really matter".
The control does not have a "time" specified of the day you wish to start... it merely gives dates - If I am selecting a date range from 1 Apr 2024 to 3 Apr 2024 - the date range returned should be 1 Apr 2024 to 3 Apr 2024.
The 'tileDisabled' dates do not suggest an hours/minutes/seconds:
import { differenceInCalendarDays } from 'date-fns';
const disabledDates = ['3-22-2024'];
function tileDisabled({ date, view }) {
// Disable tiles in month view only
if (view === 'month') {
// Check if a date React-Calendar wants to check is on the list of disabled dates
return disabledDates.find((dDate) => isSameDay(dDate, date));
}
}
function isSameDay(a, b) {
return differenceInCalendarDays(a, b) === 0;
}
<Calendar onChange={setSelectedDates} calendarType="gregory" hover minDate={now} maxDate={maxDate} value={selectedDates} tileDisabled={tileDisabled}
minDate, and value do not include "time values" either
additionally, the function that sets the 'maxDate' (see addMonthsToDate ) does not take into account hours/minutes/seconds
function addMonthsToDate(inputDate, months) {
// Clone the input date to avoid modifying the original object
var newDate = new Date(inputDate);
// Get the current month and year
var currentMonth = newDate.getMonth();
var currentYear = newDate.getFullYear();
// Calculate the new month and year after adding months
var newMonth = (currentMonth + months) % 12;
var newYear = currentYear + Math.floor((currentMonth + months) / 12);
// Set the new month and year to the date object
newDate.setMonth(newMonth);
newDate.setFullYear(newYear);
return newDate;
}
let now = new Date();
let maxDate = addMonthsToDate(now, 12);
I am confused the calendar control deals with years/months/days with some aspects but then uses hours/minutes/seconds in others
Steps to reproduce
clicked on 1 Apr 2024 and then extended selection to 3 Apr 2024 and click on 3 Apr 2024
Expected behavior
I would expect the selected dates to be 1 Apr 2024 to 3 Apr 2024
Actual behavior
selectedDates is 1 Apr 2024 to 4 Apr 2024
and the time values are always the same: "2024-04-11T06:00:00.000Z","2024-04-13T05:59:59.999Z"
Additional information
If you can provide sample code that will return the correct dates when a range is selected, regardless of what time zone the control is used - I would be happy with that
Environment
- Browser (if applicable):
- React-Calendar version:
- React version: