fix: fixed the startDate to endDate on start input (#16936)

carbon-design-system · Jul 11, 2024 · c1822dc · c1822dc
1 parent e8c6ae5
commit c1822dc
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
@@ -45,6 +45,37 @@ export const Simple = () => (
   </DatePicker>
 );
 
+export const Test = () => {
+  const [start, setStart] = useState();
+  const [end, setEnd] = useState();
+
+  const onPeriodChanged = (range) => {
+    setStart(range[0]);
+    setEnd(range[1]);
+    console.log({ range });
+  };
+
+  return (
+    <DatePicker
+      datePickerType="range"
+      value={[start, end]}
+      onChange={onPeriodChanged}>
+      <DatePickerInput
+        id="date-picker-input-id-start"
+        placeholder="mm/dd/yyyy"
+        labelText="Start date"
+        size="md"
+      />
+      <DatePickerInput
+        id="date-picker-input-id-finish"
+        placeholder="mm/dd/yyyy"
+        labelText="End date"
+        size="md"
+      />
+    </DatePicker>
+  );
+};
+
 export const SingleWithCalendar = () => (
   <DatePicker datePickerType="single">
     <DatePickerInput

diff --git a/packages/react/src/components/DatePicker/plugins/rangePlugin.js b/packages/react/src/components/DatePicker/plugins/rangePlugin.js
@@ -17,12 +17,12 @@ export default (config) => {
         origSetDate.call(this, dates, triggerChange, format);
         // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
         // where Flatpickr's range plugin takes care of fixing the first `<input>`
-        if (!triggerChange) {
-          const { _input: inputDates } = fp;
-          const inputDatesArray = inputDates.value.split(' ');
-          [inputDatesArray[0], inputDatesArray[2]].forEach((input, i) => {
+        if (!triggerChange && dates.length === 2) {
+          const { _input: inputFrom } = fp;
+          const { input: inputTo } = config;
+          [inputFrom, inputTo].forEach((input, i) => {
             if (input) {
-              input = !dates[i]
+              input.value = !dates[i]
                 ? ''
                 : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
             }