From 79f51434d7873e9826166e5fc21db5c83f083190 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Fri, 18 Oct 2024 16:47:00 +0100
Subject: [PATCH] Add form support to `DatePicker`

---
 .../src/datepicker/BaseDatePicker.vue         | 25 +-----
 .../primevue/src/datepicker/DatePicker.vue    | 76 +++++++++----------
 .../src/datepicker/style/DatePickerStyle.js   |  6 +-
 3 files changed, 42 insertions(+), 65 deletions(-)

diff --git a/packages/primevue/src/datepicker/BaseDatePicker.vue b/packages/primevue/src/datepicker/BaseDatePicker.vue
index bb851a002..32b174e60 100644
--- a/packages/primevue/src/datepicker/BaseDatePicker.vue
+++ b/packages/primevue/src/datepicker/BaseDatePicker.vue
@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import DatePickerStyle from 'primevue/datepicker/style';
 
 export default {
     name: 'BaseDatePicker',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: null,
         selectionMode: {
             type: String,
             default: 'single'
@@ -160,18 +159,6 @@ export default {
             type: [String, Object],
             default: 'body'
         },
-        variant: {
-            type: String,
-            default: null
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         readonly: {
             type: Boolean,
             default: false
@@ -180,10 +167,6 @@ export default {
             type: String,
             default: null
         },
-        name: {
-            type: String,
-            default: null
-        },
         id: {
             type: String,
             default: null
@@ -232,10 +215,6 @@ export default {
                 return { severity: 'secondary', text: true, rounded: true };
             }
         },
-        fluid: {
-            type: Boolean,
-            default: null
-        },
         ariaLabelledby: {
             type: String,
             default: null
diff --git a/packages/primevue/src/datepicker/DatePicker.vue b/packages/primevue/src/datepicker/DatePicker.vue
index a7308bed3..a30f208cb 100755
--- a/packages/primevue/src/datepicker/DatePicker.vue
+++ b/packages/primevue/src/datepicker/DatePicker.vue
@@ -533,7 +533,7 @@
 
 <script>
 import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';
-import { isEmpty, localeComparator } from '@primeuix/utils/object';
+import { localeComparator } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import CalendarIcon from '@primevue/icons/calendar';
@@ -552,7 +552,7 @@ export default {
     name: 'DatePicker',
     extends: BaseDatePicker,
     inheritAttrs: false,
-    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
+    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
     inject: {
         $pcFluid: { default: null }
     },
@@ -687,20 +687,20 @@ export default {
     },
     methods: {
         isComparable() {
-            return this.modelValue != null && typeof this.modelValue !== 'string';
+            return this.d_value != null && typeof this.d_value !== 'string';
         },
         isSelected(dateMeta) {
             if (!this.isComparable()) {
                 return false;
             }
 
-            if (this.modelValue) {
+            if (this.d_value) {
                 if (this.isSingleSelection()) {
-                    return this.isDateEquals(this.modelValue, dateMeta);
+                    return this.isDateEquals(this.d_value, dateMeta);
                 } else if (this.isMultipleSelection()) {
                     let selected = false;
 
-                    for (let date of this.modelValue) {
+                    for (let date of this.d_value) {
                         selected = this.isDateEquals(date, dateMeta);
 
                         if (selected) {
@@ -710,9 +710,9 @@ export default {
 
                     return selected;
                 } else if (this.isRangeSelection()) {
-                    if (this.modelValue[1]) return this.isDateEquals(this.modelValue[0], dateMeta) || this.isDateEquals(this.modelValue[1], dateMeta) || this.isDateBetween(this.modelValue[0], this.modelValue[1], dateMeta);
+                    if (this.d_value[1]) return this.isDateEquals(this.d_value[0], dateMeta) || this.isDateEquals(this.d_value[1], dateMeta) || this.isDateBetween(this.d_value[0], this.d_value[1], dateMeta);
                     else {
-                        return this.isDateEquals(this.modelValue[0], dateMeta);
+                        return this.isDateEquals(this.d_value[0], dateMeta);
                     }
                 }
             }
@@ -723,33 +723,33 @@ export default {
             if (!this.isComparable()) return false;
 
             if (this.isMultipleSelection()) {
-                return this.modelValue.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
+                return this.d_value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
             } else if (this.isRangeSelection()) {
-                if (!this.modelValue[1]) {
-                    return this.modelValue[0]?.getFullYear() === this.currentYear && this.modelValue[0]?.getMonth() === month;
+                if (!this.d_value[1]) {
+                    return this.d_value[0]?.getFullYear() === this.currentYear && this.d_value[0]?.getMonth() === month;
                 } else {
                     const currentDate = new Date(this.currentYear, month, 1);
-                    const startDate = new Date(this.modelValue[0].getFullYear(), this.modelValue[0].getMonth(), 1);
-                    const endDate = new Date(this.modelValue[1].getFullYear(), this.modelValue[1].getMonth(), 1);
+                    const startDate = new Date(this.d_value[0].getFullYear(), this.d_value[0].getMonth(), 1);
+                    const endDate = new Date(this.d_value[1].getFullYear(), this.d_value[1].getMonth(), 1);
 
                     return currentDate >= startDate && currentDate <= endDate;
                 }
             } else {
-                return this.modelValue.getMonth() === month && this.modelValue.getFullYear() === this.currentYear;
+                return this.d_value.getMonth() === month && this.d_value.getFullYear() === this.currentYear;
             }
         },
         isYearSelected(year) {
             if (!this.isComparable()) return false;
 
             if (this.isMultipleSelection()) {
-                return this.modelValue.some((currentValue) => currentValue.getFullYear() === year);
+                return this.d_value.some((currentValue) => currentValue.getFullYear() === year);
             } else if (this.isRangeSelection()) {
-                const start = this.modelValue[0] ? this.modelValue[0].getFullYear() : null;
-                const end = this.modelValue[1] ? this.modelValue[1].getFullYear() : null;
+                const start = this.d_value[0] ? this.d_value[0].getFullYear() : null;
+                const end = this.d_value[1] ? this.d_value[1].getFullYear() : null;
 
                 return start === year || end === year || (start < year && end > year);
             } else {
-                return this.modelValue.getFullYear() === year;
+                return this.d_value.getFullYear() === year;
             }
         },
         isDateEquals(value, dateMeta) {
@@ -1148,7 +1148,7 @@ export default {
             }
 
             if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
-                let newValue = this.modelValue.filter((date) => !this.isDateEquals(date, dateMeta));
+                let newValue = this.d_value.filter((date) => !this.isDateEquals(date, dateMeta));
 
                 this.updateModel(newValue);
             } else {
@@ -1202,11 +1202,11 @@ export default {
             if (this.isSingleSelection()) {
                 modelVal = date;
             } else if (this.isMultipleSelection()) {
-                modelVal = this.modelValue ? [...this.modelValue, date] : [date];
+                modelVal = this.d_value ? [...this.d_value, date] : [date];
             } else if (this.isRangeSelection()) {
-                if (this.modelValue && this.modelValue.length) {
-                    let startDate = this.modelValue[0];
-                    let endDate = this.modelValue[1];
+                if (this.d_value && this.d_value.length) {
+                    let startDate = this.d_value[0];
+                    let endDate = this.d_value[1];
 
                     if (!endDate && date.getTime() >= startDate.getTime()) {
                         endDate = date;
@@ -1234,10 +1234,10 @@ export default {
             this.$emit('date-select', date);
         },
         updateModel(value) {
-            this.$emit('update:modelValue', value);
+            this.updateValue(value);
         },
         shouldSelectDate() {
-            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.modelValue ? this.modelValue.length : 0) : true;
+            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.d_value ? this.d_value.length : 0) : true;
             else return true;
         },
         isSingleSelection() {
@@ -1499,15 +1499,15 @@ export default {
             return hours;
         },
         validateTime(hour, minute, second, pm) {
-            let value = this.isComparable() ? this.modelValue : this.viewDate;
+            let value = this.isComparable() ? this.d_value : this.viewDate;
             const convertedHour = this.convertTo24Hour(hour, pm);
 
             if (this.isRangeSelection()) {
-                value = this.modelValue[1] || this.modelValue[0];
+                value = this.d_value[1] || this.d_value[0];
             }
 
             if (this.isMultipleSelection()) {
-                value = this.modelValue[this.modelValue.length - 1];
+                value = this.d_value[this.d_value.length - 1];
             }
 
             const valueDateString = value ? value.toDateString() : null;
@@ -1635,14 +1635,14 @@ export default {
         },
         updateModelTime() {
             this.timePickerChange = true;
-            let value = this.isComparable() ? this.modelValue : this.viewDate;
+            let value = this.isComparable() ? this.d_value : this.viewDate;
 
             if (this.isRangeSelection()) {
-                value = this.modelValue[1] || this.modelValue[0];
+                value = this.d_value[1] || this.d_value[0];
             }
 
             if (this.isMultipleSelection()) {
-                value = this.modelValue[this.modelValue.length - 1];
+                value = this.d_value[this.d_value.length - 1];
             }
 
             value = value ? new Date(value.getTime()) : new Date();
@@ -1658,12 +1658,12 @@ export default {
             value.setSeconds(this.currentSecond);
 
             if (this.isRangeSelection()) {
-                if (this.modelValue[1]) value = [this.modelValue[0], value];
+                if (this.d_value[1]) value = [this.d_value[0], value];
                 else value = [value, null];
             }
 
             if (this.isMultipleSelection()) {
-                value = [...this.modelValue.slice(0, -1), value];
+                value = [...this.d_value.slice(0, -1), value];
             }
 
             this.updateModel(value);
@@ -2613,9 +2613,10 @@ export default {
         },
         onBlur(event) {
             this.$emit('blur', { originalEvent: event, value: event.target.value });
+            this.formField.onBlur?.();
 
             this.focused = false;
-            event.target.value = this.formatValue(this.modelValue);
+            event.target.value = this.formatValue(this.d_value);
         },
         onKeyDown(event) {
             if (event.code === 'ArrowDown' && this.overlay) {
@@ -2745,7 +2746,7 @@ export default {
     },
     computed: {
         viewDate() {
-            let propValue = this.modelValue;
+            let propValue = this.d_value;
 
             if (propValue && Array.isArray(propValue)) {
                 if (this.isRangeSelection()) {
@@ -2772,7 +2773,7 @@ export default {
             }
         },
         inputFieldValue() {
-            return this.formatValue(this.modelValue);
+            return this.formatValue(this.d_value);
         },
         months() {
             let months = [];
@@ -2948,9 +2949,6 @@ export default {
         },
         panelId() {
             return this.d_id + '_panel';
-        },
-        hasFluid() {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {
diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js
index bd26fe1c8..0a9a4d999 100644
--- a/packages/primevue/src/datepicker/style/DatePickerStyle.js
+++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js
@@ -380,11 +380,11 @@ const classes = {
     root: ({ instance, props, state }) => [
         'p-datepicker p-component p-inputwrapper',
         {
-            'p-invalid': props.invalid,
-            'p-inputwrapper-filled': props.modelValue,
+            'p-invalid': instance.$invalid,
+            'p-inputwrapper-filled': instance.$filled,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,
             'p-focus': state.focused || state.overlayVisible,
-            'p-datepicker-fluid': instance.hasFluid
+            'p-datepicker-fluid': instance.$fluid
         }
     ],
     pcInputText: 'p-datepicker-input',