DateTime picker value does not persist

Date and time pickers
,
1

I am trying to make the value of the datetime picker persist through different pages in my Angular Ionic app.

I have a datetime picker with the following option:

time.html

<ion-input [(ngModel)]="time" mbsc-datetime [mbsc-options]="dateTimeSettings" #time="mobiscroll" cssClass="date-picker"></ion-input>

time.ts

dateTimeSettings: any = {
      steps: {
          minute: 15
      },
      theme: 'whitetheme',
      display: 'bottom',
      dateWheels: '|D M d|',
      returnFormat: 'moment',
      onShow: (event, inst) => {
        this.time = inst.getVal(true);
        this.updateDisplayTime();
      },
      onChange: (event, inst) => {
        this.time = inst.getVal(true);
        this.updateDisplayTime();
      },
      onSet: (event, inst) => {
        this.updateDisplayTime();
      },
      onCancel: (event, inst) =>  {
        this.time = null;
        this.updateDisplayTime();
      }
  };

this.updateDisplayTime() just checks whether the date selected is “today” and display a slightly different output.

When a datetime is selected, the value is saved in this.time and local storage. The idea is that we will be able to cache the time and display it when user returns to the time page.

Problem flow:

  1. User sets a datetime in time page. The datetime value is cached in this.time and local storage.
  2. User goes to another page.
  3. User returns to the time page.
  4. User clicks on the datetime picker.
  5. The datetime value is randomly changed to some other value (i.e. not the one user chose in step 1).

How can I make the datetime selection persists through different pages?

2

This is dumb, but we found the reason for this behavior.

tl;dr This is caused by a mistake on our part in dealing with different timezone.

We store the datetime in UTC internally, but we display the time in user’s local timezone. So when the user returns to the datetime picker, we set the datetime picker with the cached datetime (which is in UTC) without converting to the user’s local timezone.