fix: the RangePicker sets disabledDate, the date cannot be modified (#…

…888) * fix: After the RangePicker sets disabledDate, the date cannot be modified. * Add test case
react-component · Nov 4, 2024 · 4724a58 · 4724a58
1 parent 281bf37
commit 4724a58
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 10 deletions.
diff --git a/src/PickerInput/hooks/useRangeValue.ts b/src/PickerInput/hooks/useRangeValue.ts
@@ -270,10 +270,9 @@ export default function useRangeValue<ValueType extends DateType[], DateType ext
     // >>> Invalid
     const validateDates =
       // Validate start
-      (!start || !isInvalidateDate(start, { activeIndex: 0 })) &&
+      (disabled[0] || !start || !isInvalidateDate(start, { activeIndex: 0 })) &&
       // Validate end
-      (!end || !isInvalidateDate(end, { from: start, activeIndex: 1 }));
-
+      (disabled[1] || !end || !isInvalidateDate(end, { from: start, activeIndex: 1 }));
     // >>> Result
     const allPassed =
       // Null value is from clear button

diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
@@ -231,6 +231,43 @@ describe('Picker.Range', () => {
       expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy();
     });
 
+    it('should not be checked if the startDate is disabled', () => {
+      const onChange = jest.fn();
+      const { container } = render(
+        <DayRangePicker
+          disabled={[true, false]}
+          defaultValue={[getDay('2024-10-28'), getDay('2024-11-20')]}
+          disabledDate={(date: Dayjs) => date <= dayjs('2024-11-20').endOf('day')}
+          onChange={onChange}
+        />,
+      );
+
+      openPicker(container, 1);
+      selectCell('21', 1);
+      expect(onChange).toHaveBeenCalledWith(
+        [expect.anything(), expect.anything()],
+        ['2024-10-28', '2024-11-21'],
+      );
+    });
+    it('should not be checked if the endDate is disabled', () => {
+      const onChange = jest.fn();
+      const { container } = render(
+        <DayRangePicker
+          disabled={[false, true]}
+          defaultValue={[getDay('2024-10-28'), getDay('2024-11-20')]}
+          disabledDate={(date: Dayjs) => date >= dayjs('2024-11-10').endOf('day')}
+          onChange={onChange}
+        />,
+      );
+
+      openPicker(container, 0);
+      selectCell('21', 0);
+      expect(onChange).toHaveBeenCalledWith(
+        [expect.anything(), expect.anything()],
+        ['2024-10-21', '2024-11-20'],
+      );
+    });
+
     it('should close panel when finish first choose with showTime = true and disabled = [false, true]', () => {
       const { baseElement } = render(<DayRangePicker showTime disabled={[false, true]} />);
       expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2);
@@ -541,7 +578,7 @@ describe('Picker.Range', () => {
     it('pass tabIndex', () => {
       const { container } = render(
         <div>
-          <DayRangePicker tabIndex={-1}/>
+          <DayRangePicker tabIndex={-1} />
         </div>,
       );
 
@@ -705,12 +742,7 @@ describe('Picker.Range', () => {
   });
 
   it('prefix', () => {
-    render(
-      <DayRangePicker
-        prefix={<span className="prefix" />}
-        allowClear
-      />,
-    );
+    render(<DayRangePicker prefix={<span className="prefix" />} allowClear />);
     expect(document.querySelector('.prefix')).toBeInTheDocument();
   });