Skip to content
date pipes for Angular
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
source
testing
.editorconfig
.gitignore
.npmignore
CHANGELOG.md
CONTRIBUTING.md
LICENSE.md
README.md
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

luxon-angular

This is a collection of date/time pipes for Angular (5+) based on Luxon.

Getting started

  • Install (making sure Luxon is installed as well):

    npm install --save luxon luxon-angular
    

    or

    yarn add luxon luxon-angular
    

    If you plan to use the relative formatting pipes, also install the relative-time-format polyfill—so far, only Chrome supports Intl.RelativeTimeFormat.

  • Import LuxonModule:

    import { NgModule } from "@angular/core";
    import { LuxonModule } from "luxon-angular";
    
    @NgModule({
      imports: [
        LuxonModule
      ]
    })
    export class AppModule {
    
    };
  • Start using the pipes:

    import { Component } from "@angular/core";
    
    @Component({
      template: `
        This component was created at {{ date | dateTimeFromJsDate | dateTimeToFormat:'tt' }}!
      `
    })
    export class AppComponent {
      date: Date;
    
      constructor() {
        this.date = new Date();
      }
    };

Available pipes

Parsing

dateTimeFromFormat

Transforms an arbitrarily formatted date into a DateTime that can be used with the non-parsing pipes:

{{ '02 Jan 2006' | dateTimeFromFormat:'dd LLL yyyy' }}
{{ 'January 2, 2006 3:04 PM' | dateTimeFromFormat:'LLLL d, yyyy h:mm a' }}

dateTimeFromHttp

Transforms a HTTP-style date into a DateTime that can be used with the non-parsing pipes:

{{ 'Monday, 02-Jan-06 22:04:05 GMT' | dateTimeFromHttp }}
{{ 'Mon, 02 Jan 2006 22:04:05 GMT' | dateTimeFromHttp }}

dateTimeFromIso

Transforms an ISO 8601 date into a DateTime that can be used with the non-parsing pipes:

{{ '2006-01-02' | dateTimeFromIso }}
{{ '2006-01-02T15' | dateTimeFromIso }}
{{ '2006-01-02T15:04:05-07:00' | dateTimeFromIso }}

dateTimeFromJsDate

Transforms a JavaScript Date object into a DateTime that can be used with the non-parsing pipes:

{{ date | dateTimeFromJsDate }}

dateTimeFromMilliseconds

Transforms a timestamp in milliseconds from epoch into a DateTime that can be used with the non-parsing pipes:

{{ date | dateTimeFromMilliseconds }}

dateTimeFromRfc2822

Transforms a date formatted according to RFC 2822 into a DateTime that can be used with the non-parsing pipes:

{{ 'Mon, 02 Jan 2006 15:04:05 -0700' | dateTimeFromRfc2822 }}

dateTimeFromSql

Transforms a SQL-style date into a DateTime that can be used with the non-parsing pipes:

{{ '2006-01-02 15:04:05.000-0700' | dateTimeFromSql }}

durationFromIso

Transforms an ISO 8601 duration string into a Duration that can be used with the non-parsing pipes:

{{ 'P2Y4M6D' | durationFromIso }}

durationFromMilliseconds

Transforms a duration in milliseconds into a Duration that can be used with the non-parsing pipes:

{{ 24000 | durationFromMilliseconds }}

Math

dateTimeEarliest

Selects the earliest (minimum) from a list of DateTimes.

{{ [early, earliest, earlier] | dateTimeEarliest }}

dateTimeLatest

Selects the latest (maximum) from a list of DateTimes.

{{ [late, latest, later] | dateTimeLatest }}

durationLongest

Selects the longest (maximum) from a list of Durations.

{{ [long, longest, longer] | durationLongest }}

durationShortest

Selects the shortest (minimum) from a list of Durations.

{{ [short, shortest, shorter] | durationShortest }}

Time zones and offsets

In general, all time zone and offset operations change the DateTime’s zone but keep the underlying timestamp. For more information, see the Luxon docs.

dateTimeToLocal

Sets the zone of the DateTime to the local zone:

{{ date | dateTimeToLocal }}

dateTimeToUtc

Sets the zone of the DateTime to the Coordinated Universal Time zone:

{{ date | dateTimeToUtc }}

Formatting

dateTimeToFormat

Transforms a DateTime into an arbitrarily formatted string:

{{ date | dateTimeToFormat:'MMMM d, yyyy' }}

dateTimeToIso

Transforms a DateTime into an ISO 8601 date:

{{ date | dateTimeToIso }}

Also available: dateTimeToIsoDate, dateTimeToIsoTime, and dateTimeToIsoWeekDate.

dateTimeToJsDate

Transforms a DateTime into a JavaScript date:

{{ date | dateTimeToJsDate }}

Works with Angular’s DatePipe:

{{ date | dateTimeToJsDate | date:'fullDate' }}

dateTimeToRelative and dateTimeToRelativeCalendar

Transforms a DateTime into a relative time:

{{ date | dateTimeToRelative:'day':'long' }}
{{ date | dateTimeToRelativeCalendar:'month' }}

The unit and style parameters are optional.

dateTimeToSql

Transforms a DateTime into an SQL date string:

{{ date | dateTimeToSql }}

durationToIso

Transforms a Duration into an ISO 8601 duration string:

{{ duration | durationToIso }}

durationToFormat

Transforms a Duration into an arbitrarily formatted string:

{{ duration | durationToFormat:'mm:ss.SSS' }}
You can’t perform that action at this time.