Dates and Ionic Storage

Ionic Framework ionic-v3
1

I will add some date stuff to my app soon, I think I will use <ion-datetime>.
What is the correct way to handle dates in Ionic and Ionic Storage?

I already read about date-fns in many places, which seems to be used to parse and format strings and very powerful. But what exactly do I store in Storage? An ISO string? Where and how do I format the dates I want to output? In the templates with a directive? Or after getting it from storage? What if I want to edit values and save them back?

2

Yes, thatā€™s what I do.

3

Ok, formatting with a date pipe then?
How do I best get my inputs into an ISO string?

4

If youā€™re using <ion-datetime>, thatā€™s the format it expects for model or control binding, so you shouldnā€™t have to do anything extra.

5

Ok, one thing I donā€™t understand yet is how do I handle seperate inputs for date and time (2 ion-datetimes)?
Do I have two seperate strings or the same one, just with different formatting?

6

I suppose that depends on whether they really are two separate fields or not.

7

Assume we are talking about an event. It has a ā€œtimestampā€, but I want to display date and time in 2 ion-datetimes in the form for input. Logically that makes them both the same thingā€¦ so just one ISO string in storage but 2 inputs bound to the same variable with 2 different formats - right?

8

Two inputs bound to the same variable sounds like a dangerous idea. I agree with having only one value in storage, but I think I would split it into two independent controls (or ngModel bindings) for input purposes, and then have the code that sends stuff to storage combine the relevant parts of each.

9

Oh - shame, that makes it a bit uglier again then.

Thanks.

10

So I played with it a bit.

add:

datetime: String;
...
this.datetime = new Date().toISOString();

      <ion-item>
        <ion-label>Date</ion-label>
        <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="datetime"></ion-datetime>
      </ion-item>

      <ion-item>
        <ion-label>Time</ion-label>
        <ion-datetime displayFormat="H:mm" pickerFormat="H mm" [(ngModel)]="datetime"></ion-datetime>
      </ion-item>

(So for now I ignore your advice on binding both to the same model - seems to work fine for now)

Then save this to storage.

output:

<h2>{{ foo.datetime | date:'MMM dd y H:mm' }}</h2>

and

{{foo.datetime | date:'MMM dd y H:mm:ss'}}

Resorting the array by date:

    bar.sort(function(a, b) {
      return compareAsc(a.datetime, b.datetime);
    });

(Wtf the different date format string placeholders for the date pipe and ion-datetimeā€¦)

11

I am not a big fan of the stock Angular date pipe, because it relies on the very wobbly JavaScript i18n language support. Here is the date pipe I use:

import {Injectable, Pipe, PipeTransform} from '@angular/core';
import {TranslateService} from "@ngx-translate/core";
declare function require(name:string): any;
let format = require('date-fns/format');

@Pipe({
  name: 'dateformat'
})
@Injectable()
export class DateFormatPipe implements PipeTransform {
  private format: string;

  constructor(xlator: TranslateService) {
    xlator.stream('dateFormat').subscribe(fmt => this.format = fmt);
  }

  transform(d: Date | string, xfmt: string): string {
    let fmt = xfmt || this.format;
    let rv = format(d, fmt);
    return rv;
  }
}

If no explicit format parameter is provided, it uses whatever the current localization has for dateFormat.

12

Have you been burned by them or something? Iā€™ve never heard anything negative. Granted, Iā€™ve never heard anything positive either. But I didnā€™t see i18next as a controversial tool.

13

Yes, on older iOS (pre-v10) devices.

14

I import format with import { format } from 'date-fns'; Is there a difference between your and my approach?

15

When using Ionic, yours should probably be preferred. That particular version I posted actually came from a non-Ionic Angular-CLI app, and I was unable to get that syntax to work with that build toolchain.