WEB-496 Date Format Mismatch: Frontend Sends Incorrect Date Format to Backend for Holiday Creation (#2893)

src/app/organization/holidays/create-holiday/create-holiday.component.ts

@@ -332,15 +332,28 @@ export class CreateHolidayComponent implements OnInit {
     const holidayFormData = this.holidayForm.value;
     const dateFormat = this.settings.dateFormat;
     const locale = this.settings.language.code;
-    const prevFromDate: Date = this.holidayForm.value.fromDate;
+    const momentFormat = 'DD MMMM YYYY';
-    const prevToDate: Date = this.holidayForm.value.toDate;
+    const coerceDate = (value: unknown): Date | null => {
-    holidayFormData.fromDate = this.dateUtils.formatDateAsString(prevFromDate, dateFormat);
+      if (value instanceof Date) return value;
-    holidayFormData.toDate = this.dateUtils.formatDateAsString(prevToDate, dateFormat);
+      if (value == null || value === '') return null;
+      const d = new Date(value as any);
+      return Number.isNaN(d.getTime()) ? null : d;
+    };
+    const fromDate = coerceDate(this.holidayForm.value.fromDate);
+    const toDate = coerceDate(this.holidayForm.value.toDate);
+    if (!fromDate || !toDate) {
+      return;
+    }
+    holidayFormData.fromDate = this.dateUtils.formatDateAsString(fromDate, momentFormat);
+    holidayFormData.toDate = this.dateUtils.formatDateAsString(toDate, momentFormat);
     if (this.holidayForm.contains('repaymentsRescheduledTo')) {
-      const prevRepaymentsRescheduledTo: Date = this.holidayForm.value.repaymentsRescheduledTo;
+      const repaymentsRescheduledTo = coerceDate(this.holidayForm.value.repaymentsRescheduledTo);
+      if (!repaymentsRescheduledTo) {
+        return;
+      }
       holidayFormData.repaymentsRescheduledTo = this.dateUtils.formatDateAsString(
-        prevRepaymentsRescheduledTo,
+        repaymentsRescheduledTo,
-        dateFormat
+        momentFormat
       );
     }
     const offices = this.holidayForm.value.offices.map((office: string) => {

src/app/organization/holidays/edit-holiday/edit-holiday.component.ts

@@ -14,6 +14,7 @@ import { Dates } from 'app/core/utils/dates';
 import { OrganizationService } from 'app/organization/organization.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { AlertService } from 'app/core/alert/alert.service';
 
 /**
  * Edit Holiday component.
@@ -27,6 +28,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditHolidayComponent implements OnInit {
+  private alertService = inject(AlertService);
   private formBuilder = inject(UntypedFormBuilder);
   private route = inject(ActivatedRoute);
   private dateUtils = inject(Dates);
@@ -44,8 +46,7 @@ export class EditHolidayComponent implements OnInit {
   isActiveHoliday = true;
   /** Minimum Date allowed. */
   minDate = new Date(2000, 0, 1);
-  /** Maximum Date allowed. */
+  maxDate = new Date(2100, 0, 1);
-  maxDate = new Date();
 
   /**
    * Get holiday and holiday template from `Resolver`.
@@ -69,7 +70,7 @@ export class EditHolidayComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.maxDate = this.settingsService.businessDate;
+    this.maxDate = new Date(2100, 0, 1);
     this.setEditForm();
     if (!this.isActiveHoliday) {
       this.getReschedulingType();
@@ -132,22 +133,39 @@ export class EditHolidayComponent implements OnInit {
   submit() {
     const holidayFormData = this.holidayForm.value;
     const locale = this.settingsService.language.code;
-    const dateFormat = this.settingsService.dateFormat;
+    const dateFormat = 'dd MMMM yyyy';
+    const momentFormat = 'DD MMMM YYYY';
+    const coerceDate = (value: unknown): Date | null => {
+      if (value instanceof Date) return value;
+      if (value == null || value === '') return null;
+      const d = new Date(value as any);
+      return Number.isNaN(d.getTime()) ? null : d;
+    };
     if (!this.isActiveHoliday) {
-      const prevFromDate = this.holidayForm.value.fromDate;
+      const fromDate = coerceDate(this.holidayForm.value.fromDate);
-      const prevToDate = this.holidayForm.value.toDate;
+      const toDate = coerceDate(this.holidayForm.value.toDate);
-
+      if (!fromDate || !toDate) {
-      if (prevFromDate instanceof Date) {
+        this.alertService.alert({
-        holidayFormData.fromDate = this.dateUtils.formatDateAsString(prevFromDate, dateFormat);
+          type: 'Error',
-      }
+          message: 'Invalid date selected. Please select a valid date.'
-      if (prevToDate instanceof Date) {
+        });
-        holidayFormData.toDate = this.dateUtils.formatDateAsString(prevToDate, dateFormat);
+        return;
       }
+      holidayFormData.fromDate = this.dateUtils.formatDateAsString(fromDate, momentFormat);
+      holidayFormData.toDate = this.dateUtils.formatDateAsString(toDate, momentFormat);
       if (this.reSchedulingType === 2) {
-        const repaymentScheduledTo = this.holidayForm.value.repaymentsRescheduledTo;
+        const repaymentsRescheduledTo = coerceDate(this.holidayForm.value.repaymentsRescheduledTo);
-        if (repaymentScheduledTo instanceof Date) {
+        if (!repaymentsRescheduledTo) {
-          holidayFormData.repaymentsRescheduledTo = this.dateUtils.formatDateAsString(repaymentScheduledTo, dateFormat);
+          this.alertService.alert({
+            type: 'Error',
+            message: 'Invalid repayment rescheduled date. Please select a valid date.'
+          });
+          return;
         }
+        holidayFormData.repaymentsRescheduledTo = this.dateUtils.formatDateAsString(
+          repaymentsRescheduledTo,
+          momentFormat
+        );
       }
     }
     const data = {