Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

fix: add separate state for calendar selected date #4207

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
Loading
from
Open

fix: add separate state for calendar selected date #4207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions 7 src/Calendar/CalendarContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ export interface CalendarProps
*/
calendarDate: Date;

/**
* The date that is currently clicked in the picker (before definitive selection)
*/
selectedDate?: Date;

/**
* Whether to show week numbers
*/
Expand Down Expand Up @@ -241,6 +246,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
renderCellOnPicker,
renderTitle,
renderToolbar,
selectedDate,
...rest
} = props;

Expand Down Expand Up @@ -287,6 +293,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.

const contextValue = {
date: calendarDate,
selectedDate,
dateRange,
format,
hoverRangeValue,
Expand Down
5 changes: 5 additions & 0 deletions 5 src/Calendar/CalendarProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ export interface CalendarInnerContextValue {
*/
date?: Date;

/**
* The current date of the calendar.
*/
selectedDate?: Date;

/**
* The date range selected in the calendar.
*/
Expand Down
6 changes: 3 additions & 3 deletions 6 src/Calendar/Grid/GridRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useCallback } from 'react';
import { isSameDay, addDays, isBefore, isAfter, format } from '@/internals/utils/date';
import { isSameDay, isSameMonth, addDays, isBefore, isAfter, format } from '@/internals/utils/date';
import { DATERANGE_DISABLED_TARGET } from '@/internals/constants';
import { useClassNames } from '@/internals/hooks';
import { useCalendar } from '../hooks';
Expand All @@ -22,7 +22,7 @@ const GridRow: RsRefForwardingComponent<'div', GridRowProps> = React.forwardRef(
} = props;

const {
date: selected = new Date(),
selectedDate = new Date(),
dateRange,
hoverRangeValue,
isoWeek,
Expand Down Expand Up @@ -62,7 +62,7 @@ const GridRow: RsRefForwardingComponent<'div', GridRowProps> = React.forwardRef(
const rangeEnd = !unSameMonth && selectedEndDate && isSameDay(thisDate, selectedEndDate);
const isSelected = isRangeSelectionMode
? rangeStart || rangeEnd
: isSameDay(thisDate, selected);
: isSameDay(thisDate, selectedDate) && isSameMonth(thisDate, selectedDate);

// TODO-Doma Move those logic that's for DatePicker/DateRangePicker to a separate component
// Calendar is not supposed to be reused this way
Expand Down
11 changes: 10 additions & 1 deletion 11 src/Calendar/hooks/useCalendarDate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
const valueRef = useRef(value);

const [calendarDate, setValue] = useState<Date>(value ?? defaultDate ?? startOfToday());
const [selectedDate, setSelected] = useState<Date>(value ?? defaultDate ?? startOfToday());

const setCalendarDate = useCallback(
(date: React.SetStateAction<Date> | undefined) => {
Expand All @@ -15,6 +16,14 @@
},
[calendarDate]
);
const setSelectedDate = useCallback(
(date: React.SetStateAction<Date> | undefined) => {
if (date && date?.valueOf() !== selectedDate?.valueOf()) {
Copy link
Preview

Copilot AI Mar 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The dependency array for the setSelectedDate callback only includes 'calendarDate'. It should also include 'selectedDate' to ensure the callback captures the latest selectedDate value.

Copilot uses AI. Check for mistakes.

Positive FeedbackNegative Feedback
setSelected(date);
}
},
[calendarDate]

Check warning on line 25 in src/Calendar/hooks/useCalendarDate.ts

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useCallback has a missing dependency: 'selectedDate'. Either include it or remove the dependency array
);

const resetCalendarDate = useCallback(
(nextValue = value) => {
Expand All @@ -30,5 +39,5 @@
}
}, [value, defaultDate]);

return { calendarDate, setCalendarDate, resetCalendarDate };
return { calendarDate, setCalendarDate, resetCalendarDate, selectedDate, setSelectedDate };
};
11 changes: 6 additions & 5 deletions 11 src/DatePicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,10 +321,8 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
const formatStr = format || locale?.shortDateFormat || 'yyyy-MM-dd';
const { merge, prefix } = useClassNames(classPrefix);
const [value, setValue] = useControlled(valueProp, defaultValue);
const { calendarDate, setCalendarDate, resetCalendarDate } = useCalendarDate(
value,
calendarDefaultDate
);
const { calendarDate, setCalendarDate, resetCalendarDate, selectedDate, setSelectedDate } =
useCalendarDate(value, calendarDefaultDate);

const { setMonthView, monthView, toggleMonthView } = useMonthView({ onToggleMonthDropdown });
const { mode } = useDateMode(formatStr);
Expand Down Expand Up @@ -469,7 +467,8 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
* The callback triggered after clicking the OK button.
*/
const handleOK = useEventCallback((event: React.SyntheticEvent) => {
updateValue(event);
console.log('selectedDate', selectedDate);
Copy link
Preview

Copilot AI Mar 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A debugging statement is present in production code; consider removing it to clean up the output.

Suggested change
console.log('selectedDate', selectedDate);

Copilot uses AI. Check for mistakes.

Positive FeedbackNegative Feedback
updateValue(event, selectedDate);
onOk?.(calendarDate, event);
focusInput();
});
Expand Down Expand Up @@ -510,6 +509,7 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
const nextValue = copyTime({ from: calendarDate, to: date });

setCalendarDate(nextValue);
setSelectedDate(nextValue);
handleDateChange(nextValue);

if (oneTap && updatableValue) {
Expand Down Expand Up @@ -615,6 +615,7 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
isoWeek={isoWeek}
weekStart={weekStart}
calendarDate={calendarDate}
selectedDate={selectedDate}
monthDropdownProps={monthDropdownProps}
renderCellOnPicker={renderCell}
onMoveForward={handleMoveForward}
Expand Down
Loading
Morty Proxy This is a proxified and sanitized view of the page, visit original site.