fix(VDatePicker): fixed missing adapter abstractions (#19516)

fixes #18942

Co-authored-by: Soheil Hasankhani <soheil.hasankhani@pishtazan.onmicrosoft.com>
Co-authored-by: John Leider <john@vuetifyjs.com>

packages/vuetify/src/components/VDatePicker/VDatePicker.tsx

@@ -119,17 +119,22 @@ export const VDatePicker = genericComponent<new <
 
     const isReversing = shallowRef(false)
     const header = computed(() => {
-      return props.multiple && model.value.length > 1
-        ? t('$vuetify.datePicker.itemsSelected', model.value.length)
-        : model.value[0] && adapter.isValid(model.value[0])
-          ? adapter.format(model.value[0], 'normalDateWithWeekday')
-          : t(props.header)
+      if (props.multiple && model.value.length > 1) {
+        return t('$vuetify.datePicker.itemsSelected', model.value.length)
+      }
+
+      return (model.value[0] && adapter.isValid(model.value[0]))
+        ? adapter.format(adapter.date(model.value[0]), 'normalDateWithWeekday')
+        : t(props.header)
     })
     const text = computed(() => {
-      return adapter.format(
-        adapter.date(new Date(year.value, month.value, 1)),
-        'monthAndYear',
-      )
+      let date = adapter.date()
+
+      date = adapter.setYear(date, year.value)
+      date = adapter.setMonth(date, month.value)
+      date = adapter.setDate(date, 1)
+
+      return adapter.format(date, 'monthAndYear')
     })
     // const headerIcon = computed(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
     const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`)

packages/vuetify/src/composables/date/DateAdapter.ts

@@ -35,6 +35,8 @@ export interface DateAdapter<T = unknown> {
   getWeekdays (): string[]
   getMonth (date: T): number
   setMonth (date: T, month: number): T
+  getDate (date: T): number
+  setDate (date: T, day: number): T
   getNextMonth (date: T): T
   getHours (date: T): number
   setHours (date: T, hours: number): T

packages/vuetify/src/composables/date/adapters/vuetify.ts

@@ -375,6 +375,10 @@ function getMonth (date: Date) {
   return date.getMonth()
 }
 
+function getDate (date: Date) {
+  return date.getDate()
+}
+
 function getNextMonth (date: Date) {
   return new Date(date.getFullYear(), date.getMonth() + 1, 1)
 }
@@ -472,6 +476,12 @@ function setMonth (date: Date, count: number) {
   return d
 }
 
+function setDate (date: Date, day: number) {
+  const d = new Date(date)
+  d.setDate(day)
+  return d
+}
+
 function setYear (date: Date, year: number) {
   const d = new Date(date)
   d.setFullYear(year)
@@ -595,6 +605,10 @@ export class VuetifyDateAdapter implements DateAdapter<Date> {
     return setMonth(date, count)
   }
 
+  setDate (date: Date, day: number): Date {
+    return setDate(date, day)
+  }
+
   setYear (date: Date, year: number) {
     return setYear(date, year)
   }
@@ -615,6 +629,10 @@ export class VuetifyDateAdapter implements DateAdapter<Date> {
     return getMonth(date)
   }
 
+  getDate (date: Date) {
+    return getDate(date)
+  }
+
   getNextMonth (date: Date) {
     return getNextMonth(date)
   }