Dates and Ionic Storage

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?

1 Like

Yes, that’s what I do.

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

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.

1 Like

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?

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

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?

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.

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


So I played with it a bit.


datetime: String;
this.datetime = new Date().toISOString();
        <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="datetime"></ion-datetime>

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

(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.


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


{{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…)

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');

  name: 'dateformat'
export class DateFormatPipe implements PipeTransform {
  private format: string;

  constructor(xlator: TranslateService) {'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.


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.

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

1 Like

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


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.