question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RangePicker: A month is added to the end date when it is on the same month as the start date

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. Open RangePicker
  2. Highlight date text input at the top of the popup and enter any date (eg. 2019-03-12)
  3. Navigate with tab to the second field
  4. Enter end date that’s on the same month as start date (eg. 2019-03-25)
  5. Close picker by pressing Enter

What is expected?

The date range should be 2019-03-12 to 2019-03-25

What is actually happening?

A month is added to the end date, so the resulting range is 2019-03-12 to 2019-04-25. The day of the month changes correctly, the month number is invalid. screenshot with result

Environment Info
antd 3.15.0
React 16.8.4
System Linux, but irrelevant
Browser irrelevant, tested on Chromium 72 and FF 65

I couldn’t pinpoint the line that causes the issue – it can be very well because of some flawed logic in underlying rc-calendar/RangeCalendar. The cause seems to be one too many end.clone().add(1, 'month'), like there is in the getShowDateFromValue.

Also since choosing the date with mouse on a single picker pane works correctly, I suspect it has to do with combining the dates from 2 different CalendarPart components.


More information:

If you disable date range in the reproduction to disallow picking 2019-04-25, you will not be able to close the picker and select date by pressing Enter when in the second input. You can however input the date, navigate back to the first text input and then close it.

// try setting the range to 2019-03-07 to 2019-03-12 and closing the picker with Enter
<DatePicker.RangePicker
	defaultValue={[moment().subtract(5, "day"), moment(5, "day").subtract(5, "day")]}
	disabledDate={currentDate => currentDate.isAfter(moment())}
/>

If you close the popup by clicking outside of it with mouse, the end date is correctly set, as if it was not validated (?) and modified.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:5
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
ghostcommented, Sep 11, 2019

Any update on this?

0reactions
Madhavi96commented, Aug 23, 2021

Any update on this? Still experiencing a month getting added to the end date. Would appreciate a simple fix

Read more comments on GitHub >

github_iconTop Results From Across the Web

DatePicker - Ant Design
To select or input a date. ... Set range picker type by picker prop. ... When set mode to DatePicker/RangePicker, cannot select year...
Read more >
How to dynamically set month end date if start date is picked ...
For scenario 2, you can add the closed event to the <mat-date-range-picker> tag and then check if there is an end date selected....
Read more >
Date Range Picker — JavaScript Date & Time Picker Library
The start and end dates provided to your callback will be the same single date chosen.
Read more >
Date Range Picker for Bootstrap
The Date Range Picker can be turned into a single date picker widget with only one calendar. In this example, dropdowns to select...
Read more >
Date picker component — Vuetify
By default they are emitting input event when the day (for date picker) or month (for month picker), but with reactive prop they...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found