Replace moment with date-fns v3

package.json

@@ -54,12 +54,10 @@
     "chart.js": "^4.1.1",
     "cordova-plugin-file": "^7.0.0",
     "cordova-plugin-nativestorage": "^2.3.2",
-    "date-fns": "^2.29.3",
+    "date-fns": "^3.6.0",
     "file-saver": "^2.0.5",
-    "ion2-calendar": "^3.5.0",
     "ionicons": "^6.0.3",
     "mixpanel-browser": "^2.45.0",
-    "moment": "^2.30.1",
     "ng5-slider": "^1.2.6",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

src/app/app.module.ts

@@ -67,7 +67,7 @@ import {FulltimeLocationPageModule} from './pages/logged-in/fulltimer/fulltime-l
 import { FulltimerSearchPageModule } from './pages/logged-in/fulltimer/fulltimer-search/fulltimer-search.module';
 import { StaffPageModule } from './pages/logged-in/pickers/staff/staff.module';
 import { DateDropdownModule } from './components/date-dropdown/date-dropdown.module';
-import { CalendarModule } from 'ion2-calendar';
+import { CalendarModalModule } from './components/calendar-modal/calendar-modal.module';
 import {CompanyFilterPageModule} from './pages/logged-in/company/company-list/company-filter/company-filter.module';
 import { StoreOptionPageModule } from './pages/logged-in/store/store-option/store-option.module';
 import { StoreModule } from './components/store/store.module';
@@ -119,7 +119,7 @@ declare global {
     IonicModule.forRoot(),
     AppRoutingModule,
     HttpClientModule,
-    CalendarModule,
+    CalendarModalModule,
     BrowserTransferStateModule,
     IonicStorageModule.forRoot({
       name: '__payroll_staff',

src/app/components/appeal-filter/appeal-filter.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 
 
 @Component({

src/app/components/calendar-modal/calendar-modal.component.html

@@ -0,0 +1,44 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{ title }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button fill="clear" (click)="dismiss()">Cancel</ion-button>
+      <ion-button fill="clear" (click)="confirm()">Done</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ng-container *ngIf="isRangeMode; else singleDate">
+    <ion-list lines="none">
+      <ion-item>
+        <ion-label>From</ion-label>
+      </ion-item>
+      <ion-datetime
+        presentation="date"
+        [value]="fromValue"
+        [min]="minDate"
+        (ionChange)="onFromChange($event)"
+      ></ion-datetime>
+
+      <ion-item>
+        <ion-label>To</ion-label>
+      </ion-item>
+      <ion-datetime
+        presentation="date"
+        [value]="toValue"
+        [min]="minDate"
+        (ionChange)="onToChange($event)"
+      ></ion-datetime>
+    </ion-list>
+  </ng-container>
+
+  <ng-template #singleDate>
+    <ion-datetime
+      presentation="date"
+      [value]="value"
+      [min]="minDate"
+      (ionChange)="onValueChange($event)"
+    ></ion-datetime>
+  </ng-template>
+</ion-content>

src/app/components/calendar-modal/calendar-modal.component.scss

@@ -0,0 +1,3 @@
+ion-datetime {
+  margin: 0 auto 16px;
+}

src/app/components/calendar-modal/calendar-modal.component.ts

@@ -0,0 +1,117 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { format, parseISO } from 'src/app/util/date-fns';
+
+export interface CalendarDay {
+  dateObj: Date;
+  string: string;
+  unix: number;
+}
+
+export interface CalendarResult extends CalendarDay {
+  from?: CalendarDay;
+  to?: CalendarDay;
+}
+
+export interface CalendarModalOptions {
+  canBackwardsSelected?: boolean;
+  defaultDate?: Date | string;
+  defaultDateRange?: {
+    from?: Date | string;
+    to?: Date | string;
+  };
+  defaultScrollTo?: Date | string;
+  pickMode?: 'single' | 'range';
+  title?: string;
+}
+
+export type CalendarComponentOptions = CalendarModalOptions;
+
+@Component({
+  selector: 'app-calendar-modal',
+  templateUrl: './calendar-modal.component.html',
+  styleUrls: ['./calendar-modal.component.scss'],
+})
+export class CalendarModal implements OnInit {
+  @Input() options: CalendarModalOptions = {};
+
+  fromValue: string;
+  toValue: string;
+  value: string;
+  minDate: string;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {
+    const today = new Date();
+    const defaultFrom = this.options.defaultDateRange?.from || this.options.defaultDate || today;
+    const defaultTo = this.options.defaultDateRange?.to || this.options.defaultDate || today;
+
+    this.fromValue = this.toIonDate(defaultFrom);
+    this.toValue = this.toIonDate(defaultTo);
+    this.value = this.toIonDate(this.options.defaultDate || defaultTo);
+
+    if (this.options.canBackwardsSelected === false) {
+      this.minDate = this.toIonDate(today);
+    }
+  }
+
+  get isRangeMode() {
+    return this.options.pickMode === 'range';
+  }
+
+  get title() {
+    return this.options.title || 'Select Date';
+  }
+
+  onFromChange(event) {
+    this.fromValue = event.detail.value;
+  }
+
+  onToChange(event) {
+    this.toValue = event.detail.value;
+  }
+
+  onValueChange(event) {
+    this.value = event.detail.value;
+  }
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+
+  confirm() {
+    if (this.isRangeMode) {
+      const selectedFrom = this.toCalendarDay(this.fromValue);
+      const selectedTo = this.toCalendarDay(this.toValue);
+      const [from, to] =
+        selectedFrom.unix <= selectedTo.unix ? [selectedFrom, selectedTo] : [selectedTo, selectedFrom];
+
+      this.modalCtrl.dismiss({
+        ...from,
+        from,
+        to,
+      });
+      return;
+    }
+
+    this.modalCtrl.dismiss(this.toCalendarDay(this.value));
+  }
+
+  private toIonDate(value: Date | string): string {
+    const date = value instanceof Date ? value : parseISO(value);
+    const safeDate = Number.isNaN(date.getTime()) ? new Date() : date;
+
+    return format(safeDate, 'yyyy-MM-dd');
+  }
+
+  private toCalendarDay(value: string): CalendarDay {
+    const date = parseISO(value);
+
+    return {
+      dateObj: date,
+      string: format(date, 'yyyy-MM-dd'),
+      unix: Math.floor(date.getTime() / 1000),
+    };
+  }
+}

src/app/components/calendar-modal/calendar-modal.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+import { CalendarModal } from './calendar-modal.component';
+
+@NgModule({
+  declarations: [CalendarModal],
+  imports: [CommonModule, IonicModule],
+  exports: [CalendarModal],
+})
+export class CalendarModalModule {}

src/app/components/date-dropdown/date-dropdown.component.ts

@@ -1,6 +1,6 @@
 import { Component, forwardRef, Input, OnChanges, OnInit } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
-import * as dateFns from 'date-fns';
+import * as dateFns from 'src/app/util/date-fns';
 import { Platform } from '@ionic/angular';
 
 

src/app/components/date-picker/date-picker.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { PopoverController } from '@ionic/angular';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 
 @Component({
   selector: 'app-date-picker',

src/app/components/date-popup/date-popup.component.ts

@@ -1,5 +1,5 @@
 import { Component, Output, Input, EventEmitter, OnInit } from '@angular/core';
-import {format, parseISO} from "date-fns";
+import {format, parseISO} from "src/app/util/date-fns";
 
 /**
  * Display alert message to update app on new version availability

src/app/components/date-range-refinement-list/date-range-refinement-list.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, Inject, forwardRef, EventEmitter, Output, OnInit, Opt
 import { connectRange } from 'instantsearch.js/es/connectors';
 import { BaseWidget, NgAisIndex, NgAisInstantSearch } from 'angular-instantsearch';
 import { parseNumberInput, noop } from 'angular-instantsearch/esm2015/utils';
-import {CalendarModal, CalendarModalOptions, CalendarResult} from 'ion2-calendar';
+import {CalendarModal, CalendarModalOptions} from 'src/app/components/calendar-modal/calendar-modal.component';
 import { ModalController } from '@ionic/angular';
 import {Options} from "ng5-slider";
 

src/app/components/request-filter/request-filter.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import { ModalController } from '@ionic/angular';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 
 @Component({
   selector: 'app-request-filter',

src/app/components/story-filter/story-filter.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 
 @Component({
   selector: 'app-story-filter',

src/app/components/time-picker/time-picker.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { PopoverController } from '@ionic/angular';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 
 @Component({
   selector: 'app-time-picker',

src/app/pages/logged-in/candidate-assign-form/candidate-assign-form.page.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ModalController } from '@ionic/angular';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 //models
 import { Contract } from 'src/app/models/contract';
 //services

src/app/pages/logged-in/candidate/candidate-assigned-history/candidate-assigned-history.page.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { AlertController, NavController, PopoverController, ToastController } from '@ionic/angular';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 // models
 import { Candidate } from 'src/app/models/candidate';
 import { Story } from 'src/app/models/request';

src/app/pages/logged-in/candidate/candidate-certificate-form/candidate-certificate-form.page.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AlertController, ModalController } from '@ionic/angular';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 //models
 import { Candidate } from 'src/app/models/candidate';
 import { CandidateWorkHistory } from 'src/app/models/candidate-work-history';

src/app/pages/logged-in/candidate/candidate-form/candidate-form.page.ts

@@ -3,7 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import {AlertController, ModalController, NavController, ToastController} from '@ionic/angular';
 import { CustomValidator } from 'src/app/validators/custom.validator';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 // service
 import { CandidateService } from 'src/app/providers/logged-in/candidate.service';
 import { UniversityService } from 'src/app/providers/logged-in/university.service';

src/app/pages/logged-in/candidate/candidate-view/candidate-view.page.ts

@@ -16,7 +16,7 @@ import {
   CalendarModalOptions,
   CalendarResult,
   CalendarComponentOptions
-} from 'ion2-calendar';
+} from 'src/app/components/calendar-modal/calendar-modal.component';
 
 // models
 import { Store } from 'src/app/models/store';

src/app/pages/logged-in/candidate/candidate-work-log/log-time-manually/log-time-manually.page.ts

@@ -11,7 +11,7 @@ import { DatePickerComponent } from 'src/app/components/date-picker/date-picker.
 import { TimePickerComponent } from 'src/app/components/time-picker/time-picker.component';
 //validators
 import { CustomValidator } from 'src/app/validators/custom.validator';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO } from 'src/app/util/date-fns';
 
 
 @Component({