Ionic 6 date-time picker

Ionic Framework Ionic Angular
1

Hello,
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()); }

Picker1
Picker1834×371 16.8 KB

Picker2

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

1 Like
2

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

3

Using date-fns, format value using formatISO method.

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

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 {
            this.formEdit.controls.callDate.setValue(zonedDate.toISOString());    
          }
1 Like