How to add dayjs in Ionic or angular .?

The dayjs is an open-source JavaScript library of a 2KB date and we’ll demonstrate dayjs in Ionic. The library is an alternative to Moment.js with the same modern API. The Day.js is a minimalist JavaScript library that parses, validates, manipulates, displays dates and times for modern browsers.

Many application scenarios where we need to save the date in local time in the database. The dayjs have great support for internationalization, we can easily convert UTC to local time vice versa. In the example below, we will learn. Here is a screenshot of the Ionic dayjs example.

Create project for Dayjs in Ionic Angular project

Step 1: Let first create and install dayjs in our Ionic angular project.

ionic start dayjsApp blank --type=angular // For Ionic 
OR
ng new dayjsApp  //For Angular

cd dayjsApp
npm install dayjs --save

Step 2: Edit home.page.ts file in ionic, in angular edit app.component.ts to import dayjs library.

import { Component } from '@angular/core';
import * as dayjs from 'dayjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  currentDate;
  dateOnly: Date;
  timeOnly: Date;
  timeIn12: Date;
  localDate: Date;
  usaDate: Date;
  previousMonth: Date;
  fiveMinuteBefore: Date;
  startingMonth: Date;
  setDate: Date;
  now;
  lastTime;
  diffWeek;
  diffday;
  diffHour;
  diffMinute;

  constructor() {
    this.currentDate = dayjs().format('ddd DD MMM, YYYY HH:mm:ss A');
    this.dateOnly = dayjs().format('DD MMM, YYYY');
    this.timeOnly = dayjs().format('HH:mm:ss A');
    this.timeIn12 = dayjs().format('hh:mm:ss A');
    this.localDate = dayjs().format('DD MMM, YYYY HH:mm:ss A');
    this.usaDate = dayjs(new Date().toLocaleString('en-US', {timeZone: 'America/New_York'})).format('DD MMM, YYYY HH:mm:ss A');

    this.previousMonth = dayjs().subtract(1, 'month').format('DD MMM, YYYY');
    this.fiveMinuteBefore = dayjs().subtract(5, 'minute').format('DD MMM, YYYY HH:mm:ss A');
    this.startingMonth  = dayjs().startOf('month').format('YYYY-MM-DD');
    this.setDate = dayjs('1959-03-10');

    this.lastTime = dayjs('2019-01-01 00:00:00');
    this.now = dayjs();

    this.diffWeek = this.now.diff(this.lastTime, 'week');
    this.diffday = this.now.diff(this.lastTime, 'day');
    this.diffHour = this.now.diff(this.lastTime, 'hour') % 24;
    this.diffMinute = this.now.diff(this.lastTime, 'minute')  % 60;

  }
}

Step 3: Edit home.page.html in ionic and in angular edit app.component.html to display the output of our dayjs in the ionic angular example.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic 4 Dayjs
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <h2>Date js</h2>
    <hr color="red">
    <strong>Current Date</strong> {{ currentDate }}<br>
    <strong>Date Only</strong> {{ dateOnly }} <br />
    <strong>Time in 12 Hour formats</strong> {{ timeIn12 }} <br />
    <strong>Local Date and time</strong> {{ localDate }}<br />
    <strong>Date and time in USA</strong> {{ usaDate }}<br />

    <h2>Date manipulation</h2>
    <hr color="red">
    <strong>Previous Month</strong> {{ previousMonth }}<br>
    <strong>Five Minute Before</strong> {{ fiveMinuteBefore }} <br />
    <strong>Starting Month</strong> {{ startingMonth }}<br />
    <strong>Set Date</strong> {{ setDate }}

    <h3>Date And time Difference: Starting Year {{ lastTime | date: "d MMM, yyyy, hh:mm" }} - now
      {{ now | date: "d MMM, yyyy, hh:mm" }}</h3>
    <hr color="red">
    <ul>
      <li>Differnce in Weeks : {{ diffWeek }} Weeks </li>
      <li>Differnce in days: {{ diffday }} Days </li>
      <li>Difference in hours: {{ diffHour }} Hours </li>
      <li>Difference in minutes: {{ diffMinute }} Minutes</li>
    </ul>
  </div>
</ion-content>

You can and read more examples of dayjs on official dayjs documentation.

Related posts

• How to add Angular signature pad ?
• How to install Angular material ?
• How to implement CKEditor in Angular ?
• How to use to implement HighCharts Angular ?