fix(#4454): empty range date picker start date

epicmaxco · Feb 6, 2025 · 92ba280 · 92ba280
1 parent d2a8129
commit 92ba280
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 7 deletions.
diff --git a/packages/ui/src/components/va-date-input/VaDateInput.stories.ts b/packages/ui/src/components/va-date-input/VaDateInput.stories.ts
@@ -252,3 +252,18 @@ export const EventListeners = () => ({
   <VaDateInput v-model="value" @keydown="onKeydown" manual-input />
   `,
 })
+
+export const Range = () => ({
+  components: { VaDateInput },
+
+  data () {
+    return {
+      value: { start: new Date('2020-01-01T00:00:00.000Z'), end: new Date('2020-01-02T00:00:00.000Z') },
+    }
+  },
+
+  template: `
+  {{ value }}
+  <VaDateInput v-model="value" />
+  `,
+})
diff --git a/packages/ui/src/components/va-date-input/VaDateInput.vue b/packages/ui/src/components/va-date-input/VaDateInput.vue
@@ -232,6 +232,10 @@ const modelValueToString = (value: DateInputModelValue): string => {
     return props.formatDate(value)
   }
   if (isRange(value)) {
+    if (value.start === null && value.end === null) {
+      return ''
+    }
+
     return dateOrNothing(value.start) + props.rangeDelimiter + dateOrNothing(value.end)
   }
 

diff --git a/packages/ui/src/components/va-date-picker/VaDatePicker.stories.ts b/packages/ui/src/components/va-date-picker/VaDatePicker.stories.ts
@@ -19,3 +19,18 @@ export const firstWeekDay: StoryFn = () => ({
   <VaDatePicker firstWeekday="monday"/>
   `,
 })
+
+export const Range = () => ({
+  components: { VaDatePicker },
+
+  data () {
+    return {
+      value: { start: new Date('2020-01-01T00:00:00.000Z'), end: new Date('2020-01-02T00:00:00.000Z') },
+    }
+  },
+
+  template: `
+  {{ value }}
+  <VaDatePicker v-model="value" />
+  `,
+})
diff --git a/...s/ui/src/components/va-date-picker/components/VaDayPicker/va-date-picker-calendar-hook.ts b/...s/ui/src/components/va-date-picker/components/VaDayPicker/va-date-picker-calendar-hook.ts
@@ -2,7 +2,6 @@ import { computed, Ref } from 'vue'
 
 import { DatePickerView } from '../../types'
 
-/** Returns last day of previous month */
 export const getMonthDaysCount = (year: number, month: number): number => new Date(year, month + 1, 0).getDate()
 
 export const getMonthStartWeekday = (year: number, month: number) => new Date(year, month, 1).getDay()

diff --git a/packages/ui/src/components/va-date-picker/hooks/model-value-helper.ts b/packages/ui/src/components/va-date-picker/hooks/model-value-helper.ts
@@ -64,7 +64,10 @@ export const useDatePickerModelValue = (
       }
 
       emit('update:modelValue', date)
-    } else if (mode === 'range') {
+      return
+    }
+
+    if (mode === 'range') {
       if (!isRange(props.modelValue)) {
         return throwIncorrectModelValueError(props.modelValue, mode)
       }
@@ -73,18 +76,21 @@ export const useDatePickerModelValue = (
         return emit('update:modelValue', { start: props.modelValue.start, end: null })
       }
       if (props.modelValue.start && dateEqual(props.modelValue.start, date)) {
-        return emit('update:modelValue', { start: null, end: props.modelValue.end })
+        return emit('update:modelValue', { start: props.modelValue.end, end: null })
       }
 
-      if (props.modelValue.end === null) {
-        return emit('update:modelValue', sortRange({ start: props.modelValue.start, end: date }))
-      }
       if (props.modelValue.start === null) {
         return emit('update:modelValue', sortRange({ end: props.modelValue.end, start: date }))
       }
+      if (props.modelValue.end === null) {
+        return emit('update:modelValue', sortRange({ start: props.modelValue.start, end: date }))
+      }
 
       emit('update:modelValue', { start: date, end: null })
-    } else if (mode === 'multiple') {
+      return
+    }
+
+    if (mode === 'multiple') {
       if (!isDates(props.modelValue)) {
         return throwIncorrectModelValueError(props.modelValue, mode)
       }