fix(DatePicker): set placeholder based on modelValue

unovue · Feb 3, 2025 · 1022f34 · 1022f34
1 parent 14da5f1
commit 1022f34
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 14 deletions.
diff --git a/packages/radix-vue/src/DateField/DateFieldRoot.vue b/packages/radix-vue/src/DateField/DateFieldRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type DateValue, isEqualDay } from '@internationalized/date'
+import type { DateValue } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
@@ -192,8 +192,9 @@ watch(locale, (value) => {
 })
 
 watch(modelValue, (_modelValue) => {
-  if (!isNullish(_modelValue) && (!isEqualDay(placeholder.value, _modelValue) || placeholder.value.compare(_modelValue) !== 0))
+  if (!isNullish(_modelValue) || placeholder.value.compare(_modelValue) !== 0) {
     placeholder.value = _modelValue.copy()
+  }
 })
 
 watch([modelValue, locale], ([_modelValue]) => {

diff --git a/packages/radix-vue/src/DatePicker/DatePickerField.vue b/packages/radix-vue/src/DatePicker/DatePickerField.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type DateValue, isEqualDay } from '@internationalized/date'
+import type { DateValue } from '@internationalized/date'
 import { DateFieldRoot } from '..'
 import { injectDatePickerRootContext } from './DatePickerRoot.vue'
 </script>
@@ -30,11 +30,11 @@ const rootContext = injectDatePickerRootContext()
       dir: rootContext.dir.value,
     }"
     @update:model-value="(date: DateValue | undefined) => {
-      if (date && rootContext.modelValue.value && isEqualDay(rootContext.modelValue.value, date) && date.compare(rootContext.modelValue.value) === 0) return
+      if (date && rootContext.modelValue.value && date.compare(rootContext.modelValue.value) === 0) return
       rootContext.onDateChange(date)
     }"
     @update:placeholder="(date: DateValue) => {
-      if (isEqualDay(rootContext.placeholder.value, date) && date.compare(rootContext.placeholder.value) === 0) return
+      if (date.compare(rootContext.placeholder.value) === 0) return
       rootContext.onPlaceholderChange(date)
     }"
   >

diff --git a/packages/radix-vue/src/DatePicker/DatePickerRoot.vue b/packages/radix-vue/src/DatePicker/DatePickerRoot.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
-import { type DateValue, isEqualDay, isSameDay } from '@internationalized/date'
+import type { DateValue } from '@internationalized/date'
 
 import type { Ref } from 'vue'
+import { computed, ref, toRefs, watch } from 'vue'
 import { createContext, useDirection } from '@/shared'
 import { type Granularity, type HourCycle, getDefaultDate } from '@/shared/date'
 import type { Matcher, WeekDayFormat } from '@/date'
@@ -53,7 +54,6 @@ export const [injectDatePickerRootContext, provideDatePickerRootContext]
 </script>
 
 <script setup lang="ts">
-import { computed, ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 
 defineOptions({
@@ -131,6 +131,12 @@ const open = useVModel(props, 'open', emits, {
 
 const dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()
 
+watch(modelValue, (value) => {
+  if (value && value.compare(placeholder.value) !== 0) {
+    placeholder.value = value.copy()
+  }
+})
+
 provideDatePickerRootContext({
   isDateUnavailable: propsIsDateUnavailable.value,
   isDateDisabled: propsIsDateDisabled.value,
@@ -160,17 +166,17 @@ provideDatePickerRootContext({
   dir,
   onDateChange(date: DateValue | undefined) {
     if (!date || !modelValue.value) {
-      modelValue.value = date
+      modelValue.value = date.copy()
     }
-    else if (!preventDeselect.value && isSameDay(modelValue.value as DateValue, date)) {
+    else if (!preventDeselect.value && modelValue.value.compare(date) === 0) {
       modelValue.value = undefined
     }
     else {
       modelValue.value = date.copy()
     }
   },
   onPlaceholderChange(date: DateValue) {
-    if (!isEqualDay(date, placeholder.value))
+    if (date.compare(placeholder.value) === 0)
       placeholder.value = date.copy()
   },
 })

diff --git a/packages/radix-vue/src/DatePicker/story/DatePickerDefault.story.vue b/packages/radix-vue/src/DatePicker/story/DatePickerDefault.story.vue
@@ -34,7 +34,6 @@ import { Label } from '@/Label'
         <DatePickerRoot
           id="date-field"
           :is-date-unavailable="date => date.day === 19"
-          locale="ar-SA"
         >
           <DatePickerField
             v-slot="{ segments }"

diff --git a/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue b/packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type DateValue, isEqualDay } from '@internationalized/date'
+import type { DateValue } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
@@ -269,7 +269,7 @@ watch(locale, (value) => {
 })
 
 watch(modelValue, (_modelValue) => {
-  if (_modelValue.start !== undefined && (!isEqualDay(placeholder.value, _modelValue.start) || placeholder.value.compare(_modelValue.start) !== 0))
+  if (_modelValue.start !== undefined && placeholder.value.compare(_modelValue.start) !== 0)
     placeholder.value = _modelValue.start.copy()
 })
 

diff --git a/packages/radix-vue/src/DateRangePicker/DateRangePickerRoot.vue b/packages/radix-vue/src/DateRangePicker/DateRangePickerRoot.vue
@@ -57,7 +57,7 @@ export const [injectDateRangePickerRootContext, provideDateRangePickerRootContex
 </script>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { ref, toRefs, watch } from 'vue'
 import { useVModel } from '@vueuse/core'
 
 defineOptions({
@@ -134,6 +134,12 @@ const open = useVModel(props, 'open', emits, {
 
 const dateFieldRef = ref<InstanceType<typeof DateRangeFieldRoot> | undefined>()
 
+watch(modelValue, (value) => {
+  if (value.start && value.start.compare(placeholder.value) !== 0) {
+    placeholder.value = value.start.copy()
+  }
+})
+
 provideDateRangePickerRootContext({
   isDateUnavailable: propsIsDateUnavailable.value,
   isDateDisabled: propsIsDateDisabled.value,