-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
Fix end time selection before selecting date #6858
Changes from all commits
d8d9fc6
1ce57b1
021d4a2
5e01be0
603e0cd
538464f
49f8344
6e133a2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
type: fix | ||
fix: | ||
description: Fix `DateRangePicker` end time selection before selecting end date | ||
links: | ||
- https://github.com/palantir/blueprint/pull/6858 |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,7 +15,7 @@ | |
*/ | ||
|
||
import classNames from "classnames"; | ||
import { format } from "date-fns"; | ||
import { addDays, format } from "date-fns"; | ||
import * as React from "react"; | ||
import type { DateFormatter, DayModifiers, DayMouseEventHandler, ModifiersClassNames } from "react-day-picker"; | ||
|
||
|
@@ -265,17 +265,38 @@ export class DateRangePicker3 extends DateFnsLocalizedComponent<DateRangePicker3 | |
|
||
const { value, time } = this.state; | ||
const newValue = DateUtils.getDateTime( | ||
value[dateIndex] != null ? DateUtils.clone(value[dateIndex]!) : new Date(), | ||
value[dateIndex] != null ? DateUtils.clone(value[dateIndex]!) : this.getDefaultDate(dateIndex), | ||
newTime, | ||
); | ||
const newDateRange: DateRange = [value[0], value[1]]; | ||
newDateRange[dateIndex] = newValue; | ||
const newTimeRange: DateRange = [time[0], time[1]]; | ||
newTimeRange[dateIndex] = newTime; | ||
|
||
this.props.onChange?.(newDateRange); | ||
this.setState({ value: newDateRange, time: newTimeRange }); | ||
}; | ||
|
||
// When a user sets the time value before choosing a date, we need to pick a date for them | ||
// The default depends on the value of the other date since there's an invariant | ||
// that the left/0 date is always less than the right/1 date | ||
private getDefaultDate = (dateIndex: number) => { | ||
evansjohnson marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const { value } = this.state; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nitpick: I'm not too worried about this since this is already happening in the existing code, but I wonder if we need to grab existing state in the Otherwise we could end up with weird bugs if In general, any time "next state" is computed from some kind of prior state, I usually read the prior state in a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. oof yea, I remember dealing with stuff like this back when seeing class components more often in this case I'm thinking let's leave as is since as you call out we access There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Agree! Let's leave as-is. I almost didn't make this comment because it was an existing issue. |
||
const otherIndex = dateIndex === 0 ? 1 : 0; | ||
const otherDate = value[otherIndex]; | ||
if (otherDate == null) { | ||
return new Date(); | ||
} | ||
|
||
const { allowSingleDayRange } = this.props; | ||
if (!allowSingleDayRange) { | ||
const dateDiff = dateIndex === 0 ? -1 : 1; | ||
return addDays(otherDate, dateDiff); | ||
} | ||
|
||
return otherDate; | ||
}; | ||
|
||
private handleTimeChangeLeftCalendar = (time: Date) => { | ||
this.handleTimeChange(time, 0); | ||
}; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just as a suggestion, I think we can add an inline source code comment to explain why we need to be careful about selecting the next default date.
Maybe something around: