Ionic angular-calendar 'date-fns' format


#1

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) {
    this.afDatabse.list(`/events/`).push({
      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-item>
      <ion-input type="text" placeholder="Title" [(ngModel)]="events.title"></ion-input>
    </ion-item>

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

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

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

#2

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.


#3

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.


#4

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


#5

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?