Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onCalendarClose is not called when selecting the same day as start&end date in selectsRange mode #4076

Closed
guanpu opened this issue Jun 14, 2023 · 3 comments · Fixed by qburst/react-datepicker-3#8 or #4394

Comments

@guanpu
Copy link

guanpu commented Jun 14, 2023

Describe the bug
A clear and concise description of what the bug is.
As per title, the calendar is not closed, nor is onCalendarClose being called if the startDate and endDate is the same day.

To Reproduce
try it this way:

function DateRangePicker() {
  const [startDate, setStartDate] = React.useState(Date.now());
  const [endDate, setEndDate] = React.useState(Date.now());
  const onChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };
  const handleCalendarClose = () => console.log("Calendar closed");

  return (
    <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      shouldCloseOnSelect={true}
      onCalendarClose={handleCalendarClose}
      selectsRange
    />
  );
}
  1. Open Calendar
  2. select some date as startDate
  3. select the same date as endDate
  4. the calendar is not automatically closed, nor does the "Calendar closed" log showing up in the console.

Expected behavior
Expect calendar closed and onCalendarClose being called, just as if the startDate and endDate is not the same day.

Desktop (please complete the following information):

  • OS: ubuntu 22.04
  • Browser firefox
  • Version 111
balajis-qb pushed a commit to qburst/react-datepicker-3 that referenced this issue Nov 28, 2023
…selected for a date range

This commit resolves the following 2 issues
1. Previously we were checking whether to emit the onCalendarClose close or not using the isBefore function but the issue is the startDate has the default time added, but the endDate we get from the calendar component doesn't has any time added to it, hence the isBefore check was failing as the startDate with some time is always ahead of the same date (endDate) without time
2. Similarly we were using the same isBefore function to decide whether to consider the date as startDate or endDate for onChange event handler, as the isBefore will fail for the same date as I explained in the previous point, the end date is being considered as the startDate, hence we need to once again select the endDate value

Closes: Hacker0x01#4076
balajis-qb pushed a commit to qburst/react-datepicker-3 that referenced this issue Nov 28, 2023
…a date range

This commit resolves the following issue
- Previously we were checking whether to emit the onCalendarClose close or not using the isBefore function but the issue is the startDate has the default time added, but the endDate we get from the calendar component doesn't has any time added to it, hence the isBefore check was failing as the startDate with some time is always ahead of the same date (endDate) without time

Closes: Hacker0x01#4076
@balajis-qb
Copy link

This issue also exist with the onChange Event Handler when we just set the initial value for the startDate, but not the endDate like below

function DateRangePicker() {
  const [startDate, setStartDate] = React.useState(Date.now());
  const [endDate, setEndDate] = React.useState();
  const onChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };
  const handleCalendarClose = () => console.log("Calendar closed");

  return (
    <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      shouldCloseOnSelect={true}
      onCalendarClose={handleCalendarClose}
      selectsRange
    />
  );
}

In the above case, the first onChange call won't get triggered if we select the same date for the endDate, as a few milli secs difference is there I guess.

balajis-qb pushed a commit to qburst/react-datepicker-3 that referenced this issue Nov 28, 2023
…selected for a date range

This commit resolves the following issue
1. Previously we were checking whether to emit the onCalendarClose close or not using the isBefore function but the issue is the startDate has the default time added, but the endDate we get from the calendar component doesn't has any time added to it, hence the isBefore check was failing as the startDate with some time is always ahead of the same date (endDate) without time
2. Similarly we were using the same isBefore function to decide whether to consider the date as startDate or endDate for onChange event handler, as the isBefore will fail because of the few milli-sec difference and the onChange call will fail.  As a result the end date (the currently selected date) is being considered as the startDate, hence we need to once again select the endDate value

Closes: Hacker0x01#4076
balajis-qb pushed a commit to qburst/react-datepicker-3 that referenced this issue Nov 28, 2023
…selected for a date range

This commit resolves the following issue
1. Previously we were checking whether to emit the onCalendarClose close or not using the isBefore function but the issue is the startDate has the default time added, but the endDate we get from the calendar component doesn't has any time added to it, hence the isBefore check was failing as the startDate with some time is always ahead of the same date (endDate) without time
2. Similarly we were using the same isBefore function to decide whether to consider the date as startDate or endDate for onChange event handler, as the isBefore will fail because of the few milli-sec difference and the onChange call will fail.  As a result the end date (the currently selected date) is being considered as the startDate, hence we need to once again select the endDate value

Closes: Hacker0x01#4076
balajis-qb pushed a commit to qburst/react-datepicker-3 that referenced this issue Nov 28, 2023
…selected for a date range

This commit resolves the following issue
1. Previously we were checking whether to emit the onCalendarClose close or not using the isBefore function but the issue is the startDate has the default time added, but the endDate we get from the calendar component doesn't has any time added to it, hence the isBefore check was failing as the startDate with some time is always ahead of the same date (endDate) without time
2. Similarly we were using the same isBefore function to decide whether to consider the date as startDate or endDate for onChange event handler, as the isBefore will fail because of the few milli-sec difference and the onChange call will fail.  As a result the end date (the currently selected date) is being considered as the startDate, hence we need to once again select the endDate value

Closes: Hacker0x01#4076
balajis-qb pushed a commit to qburst/react-datepicker-3 that referenced this issue Dec 7, 2023
balajis-qb pushed a commit to qburst/react-datepicker-3 that referenced this issue Dec 7, 2023
martijnrusschen added a commit that referenced this issue Jan 3, 2024
…-key

Document #4076: 📝 Update the behavior of Home Key and End Key in the README file
@balajis-qb
Copy link

balajis-qb commented Jan 3, 2024

Hi @martijnrusschen, I think you closed this ticket accidentally.

Actually Sorry, in my PR title I wrongly linked this ticket. This is the corresponding ticket #4420. I updated the PR title now.

The PR created for this ticket is still under review only. Can you please reopen this ticket?

martijnrusschen added a commit that referenced this issue Jan 4, 2024
…ose-onsame-range-select

Fix #4076: Trigger onCalendarClose event and onChange even when the same date is selected as the start and the end date in a date range
@guanpu
Copy link
Author

guanpu commented Jan 6, 2024

Thank you @balajis-qb @martijnrusschen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment