Ionic angular-calendar 'date-fns' format


Hi there,

I’m trying add actives to firebase, pull them and display in my angular calendar. However, it complains on date format. I’m trying to format it such as new Date(my_date). However, it’s not pushing this format to firebase this way…

As you can see required format is start: Sat Apr 07 2018 00:00:00 GMT+0100 (GMT Summer Time)

I have: "2018-04-07T18:37:00Z"

My method for pushing at this moment:

 addEvent(event: CalendarEvent) {
      start: event.start,
      end: event.end,
      title: event.title,
      color: 'test',
      allDay: event.allDay

CalendarEvent interface:

import { EventColor } from "./EventColor";
import { EventAction } from "./EventAction";
export interface CalendarEvent {
  start: any;
  end?: any;
  title: string;
  color: EventColor;
  actions?: EventAction[];
  allDay?: boolean; 

My html:

      <ion-input type="text" placeholder="Title" [(ngModel)]="events.title"></ion-input>

      <ion-datetime displayFormat="HH:mm DD/MM/YYYY " pickerFormat="MMM D:HH:mm" [(ngModel)]="events.start"></ion-datetime>

      <ion-datetime displayFormat="HH:mm DD/MM/YYYY " pickerFormat="MMM D:HH:mm" [(ngModel)]="events.end"> </ion-datetime>

      <ion-label>All Day?</ion-label>
      <ion-checkbox [(ngModel)]="events.allDay"></ion-checkbox>


You can’t store anything nonserializable in Firebase. It’s a JSON structure. So you can’t store Dates. I use Firestore now, but when I was using Firebase, I used date-fns to translate every date to a milisecond timestamp, and stored those.


I use ISO 8601 strings instead, because (a) they’re easier for humans to read and (b) they can be passed directly to any of date-fns’ helpers.


The timestamp strings can too, at least they work with the helpers I’ve used. I’m talking about the getTime function of course.


I found a solution :

this.date1 = "2018-04-07T18:37:00Z";
this.date2 = new Date(this.date1);

Now I need to resemble my array with new values. Does anyone know how to do it quickly? Modify only start and end for new object array?