fix(DatePicker): fix DatePicker can't select after typing with keyboa…

…rd (#3589)

* fix: fix DatePicker can't select after typing with keyboard

* fix(Calendar): fix error in determining dates other than this month

src/Calendar/CalendarContainer.tsx

@@ -205,7 +205,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
     const showTime = calendarState === CalendarState.TIME || onlyShowTime;
     const showMonth = calendarState === CalendarState.MONTH || onlyShowMonth;
 
-    const inSameThisMonthDate = useEventCallback((date: Date) => isSameMonth(calendarDate, date));
+    const inSameThisMonthDate = (date: Date) => isSameMonth(calendarDate, date);
 
     const calendarClasses = merge(
       className,

src/DatePicker/test/DatePickerSpec.tsx

@@ -619,6 +619,15 @@ describe('DatePicker', () => {
         // eslint-disable-next-line testing-library/no-node-access
         .querySelectorAll('.rs-calendar-table-cell-un-same-month')
     ).to.have.text(['30', '31', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']);
+
+    userEvent.click(screen.getByRole('button', { name: 'Next month' }));
+
+    expect(
+      screen
+        .getByRole('grid', { name: 'Jul 2021' })
+        // eslint-disable-next-line testing-library/no-node-access
+        .querySelectorAll('.rs-calendar-table-cell-un-same-month')
+    ).to.have.text(['27', '28', '29', '30', '1', '2', '3', '4', '5', '6', '7']);
   });
 
   it('Should accept controlled value', () => {
@@ -943,6 +952,35 @@ describe('DatePicker', () => {
     expect(isValid(onChange.firstCall.firstArg)).to.be.false;
   });
 
+  it('Should call `onChange` callback and return a valid date', () => {
+    const onChange = Sinon.spy();
+
+    render(
+      <DatePicker
+        onChange={onChange}
+        format="yyyy-MM-dd"
+        defaultValue={new Date('2023-11-01')}
+        open
+      />
+    );
+
+    userEvent.type(screen.getByRole('textbox'), '{backspace}');
+
+    expect(onChange).to.be.calledOnce;
+    expect(screen.getByRole('textbox')).to.have.value('yyyy-11-01');
+
+    // Invalid date
+    expect(isValid(onChange.firstCall.firstArg)).to.be.false;
+
+    userEvent.click(screen.getByRole('gridcell', { selected: true }));
+    userEvent.click(screen.getByRole('button', { name: 'OK' }));
+
+    expect(onChange).to.be.calledTwice;
+    expect(format(onChange.secondCall.firstArg, 'yyyy-MM-dd')).to.equal(
+      format(new Date(), 'yyyy-MM-dd')
+    );
+  });
+
   describe('Accessibility', () => {
     it('Should have a aria-label attribute', () => {
       render(<DatePicker aria-label="Custom label" />);

src/utils/dateUtils.ts

@@ -7,6 +7,7 @@ import getMinutes from 'date-fns/getMinutes';
 import getSeconds from 'date-fns/getSeconds';
 import addDays from 'date-fns/addDays';
 import set from 'date-fns/set';
+import isValid from 'date-fns/isValid';
 
 export { default as addDays } from 'date-fns/addDays';
 export { default as addMonths } from 'date-fns/addMonths';
@@ -144,6 +145,10 @@ export function getMonthView(monthDate: Date, isoWeek: boolean) {
  * Copy the time of one date to another
  */
 export function copyTime({ from, to }: { from: Date; to: Date }) {
+  if (!isValid(from) || !isValid(to)) {
+    return to;
+  }
+
   return set(to, {
     hours: getHours(from),
     minutes: getMinutes(from),