feat: refs #8413 update input background color based on date validation in VnInputDate component

src/components/common/VnInputDate.vue

@@ -20,6 +20,7 @@ const $props = defineProps({
 });
 
 const vnInputDateRef = ref(null);
+const inputBgColor = ref('');
 
 const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref();
@@ -56,20 +57,30 @@ watch(
     () => model.value,
     (nVal) => {
         if (nVal) inputValue.value = date.formatDate(new Date(model.value), dateFormat);
+        else inputValue.value = '';
     },
     { immediate: true },
 );
 
 const formatDate = () => {
     let value = inputValue.value;
-    if (value === model.value) return;
+    if (value === model.value || value === '') {
+        inputBgColor.value = '';
+        return;
+    } 
     const regex =
         /^([0]?[1-9]|[12][0-9]|3[01])([./-])([0]?[1-9]|1[0-2])([./-](\d{1,4}))?$/;
-    if (!regex.test(value)) return;
+    if (!regex.test(value)){
+        inputBgColor.value = 'red';
+        return;
+    } 
 
     value = value.replace(/[.-]/g, '/');
     const parts = value.split('/');
-    if (parts.length < 2) return;
+    if (parts.length < 2) {
+        inputBgColor.value = 'red';
+         return;
+    }
 
     let [day, month, year] = parts;
     if (day.length === 1) day = '0' + day;
@@ -95,14 +106,17 @@ const formatDate = () => {
     const isoCandidate = `${year}-${month}-${day}`;
     const parsedDate = new Date(isoCandidate);
 
-    const isValidDate = // use date.isValid
+    const isValidDate = 
         parsedDate instanceof Date &&
         !isNaN(parsedDate) &&
         parsedDate.getFullYear() === parseInt(year) &&
         parsedDate.getMonth() === parseInt(month) - 1 &&
         parsedDate.getDate() === parseInt(day);
 
-    if (!isValidDate) return;
+    if (!isValidDate) {
+        inputBgColor.value = 'red';
+        return;
+    }
 
     if (model.value) {
         const original =
@@ -116,6 +130,7 @@ const formatDate = () => {
     }
 
     model.value = parsedDate.toISOString();
+    inputBgColor.value = '';
 };
 
 const handleEnter = (event) => {
@@ -144,6 +159,7 @@ const handleEnter = (event) => {
             :class="{ required: isRequired }"
             :rules="mixinRules"
             :clearable="false"
+            :bg-color="inputBgColor"
             @click="isPopupOpen = !isPopupOpen"
             @keydown="isPopupOpen = false"
             @blur="formatDate"