Time dependence selects different dates

[MichaelLiss]

Before you start - checklist

• I followed instructions in documentation written for my React-Calendar version
• 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:

I made my own control - which actually works -regardless of timezone !

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.