fix: range plugin

carbon-design-system · Apr 19, 2024 · 1306f1d · 1306f1d
1 parent 5c1e7d6
commit 1306f1d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -58,7 +58,7 @@ export const SingleWithCalendar = () => (
 
 export const RangeWithCalendar = () => {
   return (
-    <DatePicker allowInput={false} datePickerType="range">
+    <DatePicker datePickerType="range">
       <DatePickerInput
         id="date-picker-input-id-start"
         placeholder="mm/dd/yyyy"
@@ -108,7 +108,7 @@ export const SingleWithCalendarWithLayer = () => (
 export const RangeWithCalendarWithLayer = () => (
   <WithLayer>
     {(layer) => (
-      <DatePicker allowInput={false} datePickerType="range">
+      <DatePicker datePickerType="range">
         <DatePickerInput
           id={`date-picker-input-id-start-${layer}`}
           placeholder="mm/dd/yyyy"

diff --git a/packages/react/src/components/DatePicker/plugins/rangePlugin.js b/packages/react/src/components/DatePicker/plugins/rangePlugin.js
@@ -18,11 +18,12 @@ export default (config) => {
         // 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: inputFrom } = fp;
-          const { input: inputTo } = config;
-          [inputFrom, inputTo].forEach((input, i) => {
+          const { _input: inputDates } = fp;
+          const inputDatesArray = inputDates.value.split(' ');
+          fp.close();
+          [inputDatesArray[0], inputDatesArray[2]].forEach((input, i) => {
             if (input) {
-              input.value = !dates[i]
+              input = !dates[i]
                 ? ''
                 : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
             }