Improve syntheticDate elements and utilities

Author: Kubit

src/utils/syntheticComponents/__tests__/syntheticDate.test.ts

@@ -15,15 +15,23 @@ describe('syntheticDate test', () => {
     const date = '11-02-2020';
     const format = 'DD-MM-YYYY';
 
-    const rightFormatDate = formatDateToNative(date, format);
+    const rightFormatDate = formatDateToNative(date, format, false);
 
     expect(rightFormatDate).toBe('2020-02-11');
   });
-  it('fill in the year with zeros when it is less than four digits', () => {
+  it('empty date when it doesnt comply with valid format', () => {
+    const date = '2024-09-1';
+    const format = 'YYYY-MM-DD';
+
+    const rightFormatDate = formatDateToNative(date, format, false);
+
+    expect(rightFormatDate).toBe('');
+  });
+  it('fill in the year with zeros when year is in the last position and value is less than four digits', () => {
     const date = '11-02-2';
     const format = 'DD-MM-YYYY';
 
-    const rightFormatDate = formatDateToNative(date, format);
+    const rightFormatDate = formatDateToNative(date, format, false);
 
     expect(rightFormatDate).toBe('0002-02-11');
   });

src/utils/syntheticComponents/syntheticDate/helper/formatDateToNative.ts

@@ -1,9 +1,16 @@
+import { splitDate } from '@/components/inputDate/utils/verifyDate';
+
 const DD = 'DD';
 const MM = 'MM';
 const YYYY = 'YYYY';
 
-export const formatDateToNative = (value: string, format: string): string => {
-  if (value.length > 5) {
+export const formatDateToNative = (value: string, format: string, hasRange: boolean): string => {
+  const { dateToCheck } = splitDate(value, format, '', hasRange);
+
+  // Check if year is the last position in the format to trigger zeros autocomplete
+  const isYearLastPosition = format.slice(-4) === 'YYYY' && value.length > 5;
+
+  if (isYearLastPosition || dateToCheck) {
     const regex = /[a-zA-Z0-9\s]/g;
     const symbol = format.replace(regex, '').split('')[0];
 

src/utils/syntheticComponents/syntheticDate/syntheticDate.ts

@@ -20,7 +20,7 @@ export const syntheticDate = (name?: string): ReturnValue => {
   });
 
   const setDate = (value: string, format: string) => {
-    const validDate = formatDateToNative(value, format);
+    const validDate = formatDateToNative(value, format, false);
 
     dateElement.value = validDate;
     dateElement.dispatchEvent(changeEvent);