Ionic 6 date-time picker

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-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 (click)="setNull('callDate')">
      <ion-icon name="close-circle"></ion-icon>
  <!-- </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"
  <ion-popover id="popover-bottom" trigger="triggerCallDate" size="fixed">
      presentation="date-time" formControlName="callDate" locale="fr-FR" [showDefaultButtons]="true"
      doneText="{{ 'APPLICATION.OK' | translate }}" cancelText="{{ 'APPLICATION.CANCEL' | translate }}">

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.

1 Like

When I retrieve it I have this value : “2022-06-30T11:11:54.000Z”

Can you clarify what this means? The date picker in Ionic 6 does not account for any timezone information. It renders the date/time exactly as you pass it: ion-datetime: Ionic API Input for Datetime Format Picker

Using date-fns, format value using formatISO method.

const result = formatISO(new Date(this. callDate))

Thanks for the answer
I’ve noticed my nestjs service store my data in local time zone and when I retrieve it my service send it to UTC
I’ve changed my typeorm settings with

autoLoadEntities: true,
entities: [],
synchronize: true,
timezone: 'UTC',

And now when I change my date, I set it up in UTC

 this.userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;    
if (parameterToUpdate.callDate != null) {
       const utcCallDate = zonedTimeToUtc(new Date(this.formEdit.value.callDate), this.userTimeZone);
              parameterToUpdate.callDate = (new Date(utcCallDate)).toISOString();

But the problem is still present, when I retrieve my value
The input is good, but my date picker hour is not correct

let zonedDate = utcToZonedTime(data.callDate, this.userTimeZone);
if (data.callDate == null) { this.formEdit.controls.callDate.setValue(null); }
          else {
1 Like