Ionic 6 date-time picker

Question

I’m having some trouble using ionic 6 with the new date-time picker. I retrieve my value from the database (through a nest service) In my database, the date is : “2022-06-30 13:11:54” When I retrieve it I have this value : “2022-06-30T11:11:54.000Z” When I pass it to my html page, the input value is good. But when I open the date picker (the date is good, but not the time)

Here in my .html file

<ion-item>
  <ion-label color="primary" position="stacked">{{ 'CHECK_IN.CALL_DATE' | translate }}</ion-label>
  <ion-buttons slot="end">
    <ion-button (click)="setNow('callDate')">
      <ion-icon name="calendar"></ion-icon>
    </ion-button>
    <ion-button (click)="setNull('callDate')">
      <ion-icon name="close-circle"></ion-icon>
    </ion-button>
  </ion-buttons>
  <!-- </ion-item-divider> -->
  <!-- <ion-item> -->
  <!-- <ion-label color="primary" position="stacked">{{ 'OPERATION.VALID_TO' | translate }}</ion-label> -->
  <ion-input value="{{ formEdit.controls['callDate'].value | date: 'dd/MM/yyyy HH:mm'  }}" id="triggerCallDate"
    class="ion-text-end"></ion-input>
  <ion-popover id="popover-bottom" trigger="triggerCallDate" size="fixed">
    <ng-template>
      <ion-datetime 
      presentation="date-time" formControlName="callDate" locale="fr-FR" [showDefaultButtons]="true"
      doneText="{{ 'APPLICATION.OK' | translate }}" cancelText="{{ 'APPLICATION.CANCEL' | translate }}">
      </ion-datetime>
    </ng-template>
  </ion-popover>
</ion-item>

Here in my .ts file

 if (data.callDate == null) { this.formEdit.controls.callDate.setValue(null); }
  else { this.formEdit.controls.callDate.setValue((new Date(data.callDate)).toISOString());

I’ve already read ionic docmentation, but I’m a lit bit lost with date format. If any body have an existing exemple, it will be nice. Thanks

Answer 1

I've resolved my problem using

import { formatISO, parseISO } from 'date-fns';

I've remove timezone from my backend

synchronize: true,
//timezone: 'utc'

In my front-end, when I retrive my value from the database

 if (data.checkInStartDate == null) { this.formEdit.controls.checkInStartDate.setValue(null); }
 else { this.formEdit.controls.checkInStartDate.setValue(formatISO(new Date(data.checkInStartDate))); }

When I update my front-end value

setNow() {
    this.today = formatISO(new Date());
    this.formEdit.controls.checkInStartDate.setValue(this.today);
}

And when I send my value to the backend service:

if (parameterToUpdate.checkInStartDate != null) {
          parameterToUpdate.checkInStartDate = formatISO(new Date(this.formEdit.value.checkInStartDate));
        }

My ionic html

    <ion-item>
      <ion-label color="primary" position="stacked">{{ 'CHECK_IN.CHECK_IN_START_DATE' | translate }}</ion-label>
      <ion-buttons slot="end">
        <ion-button (click)="setNow('checkInStartDate')">
          <ion-icon name="calendar"></ion-icon>
        </ion-button>
        <ion-button (click)="setNull('checkInStartDate')">
          <ion-icon name="close-circle"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-input 
        value="{{ formEdit.controls['checkInStartDate'].value | date: 'dd/MM/yyyy HH:mm' }}"
        id="triggercheckInStartDate" 
        class="ion-text-end">
      </ion-input>      
    </ion-item>

 <ion-modal trigger="triggercheckInStartDate">
      <ng-template>
        <ion-datetime 
            presentation="time-date" 
            [firstDayOfWeek]="1"
            formControlName="checkInStartDate" 
            locale="fr-FR" 
            [showDefaultButtons]="true"
            [showDefaultTitle]="true"
            doneText="{{ 'APPLICATION.OK' | translate }}" 
            cancelText="{{ 'APPLICATION.CANCEL' | translate }}">
          <span slot="title">{{ 'CHECK_IN.CHECK_IN_START_DATE' | translate }}</span>
          <span slot="time-label">{{ 'CHECK_IN.HOUR' | translate }}</span>
        </ion-datetime>
      </ng-template>
    </ion-modal>