# ng-date-format > **Angular date format pipe** Latest version **2.0.1** (published 2019-01-04) · 0 weekly downloads ## Install ```sh npm install ng-date-format pnpm add ng-date-format yarn add ng-date-format bun add ng-date-format ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.1 | | Published | 2019-01-04 | | First published | 2018-09-28 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 58.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | suvojitseal | | Keywords | ng-date-format, date-pipe, angular 6, ng6 date pipe | ## Links - npm: https://www.npmjs.com/package/ng-date-format - npm.io page: https://npm.io/package/ng-date-format ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^1.9.0 ## Alternatives - [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads - [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads - [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads - [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads - [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads ## Recent versions - 2.0.1 (latest) — 2019-01-04 - 1.0.0 — 2018-09-28 ## README # ng-date-format **Angular date format pipe** ## Description Date format pipe for all tipes of date data values with __Angular6__ versions. ## Installation To install this component to an external project, follow the procedure: 1. __npm install ng-date-format --save__ 2. Add __DateFormatModule__ import to your __@NgModule__ like example below ```ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { DateFormatModule, DatePipe } from 'ng-date-format'; @NgModule({ imports: [ BrowserModule, DateFormatModule ], declarations: [ AppComponent ], providers: [ DatePipe ], bootstrap: [ AppComponent ] }) export class AppModule {} ``` 3. If you are using __systemjs__ package loader add the following mydatepicker properties to the __System.config__: ```js (function (global) { System.config({ paths: { 'npm:': 'node_modules/' }, map: { // Other components are here... 'ng-date-format': 'npm:ng-date-format/bundles/ng-date-format.umd.min.js' }, packages: { } }); })(this); ``` ## Usage Use one of the following two options. ### 1. in html template In html template use for __Milisecond__ {{1538041238172 | date: 'mediumDate'}} __Timestamp__ {{1538040936 | date: 'mediumDate'}} __Date String__ {{'2015-03-25T12:00:00' | date: 'mediumDate'}} ```ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { public dateObj: any = { dateMs: 1538041238172, dateTs: 1538040936, dateTime: "2015-03-25T12:00:00" }; } ``` ```html ``` ### 2. in component ```ts import { Component, OnInit } from '@angular/core'; import { DatePipe } from 'ng-date-format'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor( private datePipe: DatePipe ) {} ngOnInit() { const dateMs = this.datePipe.transform(1538041238172, 'mediumDate'); const dateTs = this.datePipe.transform(1538040936, 'mediumDate'); const dateDt = this.datePipe.transform('2015-03-25T12:00:00', 'mediumDate'); console.log(dateMs); console.log(dateTs); console.log(dateDt); } } ``` ## Pre-defined format options Examples are given in en-US locale. * 'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM). * 'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM). * 'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1). * 'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00). * 'shortDate': equivalent to 'M/d/yy' (6/15/15). * 'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015). * 'longDate': equivalent to 'MMMM d, y' (June 15, 2015). * 'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015). * 'shortTime': equivalent to 'h:mm a' (9:03 AM). * 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM). * 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1). * 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00). ### Custom format options You can construct a format string using symbols to specify the components of a date-time value, as described in the following table. Format details depend on the locale. Fields marked with (*) are only available in the extra data set for the given locale. | Field type | Format | Description | Example Value | | :------------ | :------------ | :------------ | :------------ | | Era|G, GG & GGG|Abbreviated|AD| | |GGGG|Wide|Anno Domini| | |GGGGG|Narrow|A| | Year|y|Numeric: minimum digits|2, 20, 201, 2017, 20173| | |yy|Numeric: 2 digits + zero padded|02, 20, 01, 17, 73| | |yyy|Numeric: 3 digits + zero padded|002, 020, 201, 2017, 20173| | |yyyy|Numeric: 4 digits or more + zero padded|0002, 0020, 0201, 2017, 20173| | Month|M|Numeric: 1 digit|9, 12| | |MM|Numeric: 2 digits + zero padded|09, 12| | |MMM|Abbreviated|Sep| | |MMMM|Wide|September| | |MMMMM|Narrow|S| | Month standalone|L|Numeric: 1 digit|9, 12| | |LL|Numeric: 2 digits + zero padded|09, 12| | |LLL|Abbreviated|Sep| | |LLLL|Wide|September| | |LLLLL|Narrow|S| | Week of year|w|Numeric: minimum digits|1... 53| | |ww|Numeric: 2 digits + zero padded|01... 53| | Week of month|W|Numeric: 1 digit|1... 5| | Day of month|d|Numeric: minimum digits|1| | |dd|Numeric: 2 digits + zero padded|01| | Week day|E, EE & EEE|Abbreviated|Tue| | |EEEE|Wide|Tuesday| | |EEEEE|Narrow|T| | |EEEEEE|Short|Tu| | Period|a, aa & aaa|Abbreviated|am/pm or AM/PM| | |aaaa|Wide (fallback to a when missing)|ante meridiem/post meridiem| | |aaaaa|Narrow|a/p| | Period*|B, BB & BBB|Abbreviated|mid.| | |BBBB|Wide|am, pm, midnight, noon, morning, afternoon, evening, night| | |BBBBB|Narrow|md| | Period standalone*|b, bb & bbb|Abbreviated|mid.| | |bbbb|Wide|am, pm, midnight, noon, morning, afternoon, evening, night| | |bbbbb|Narrow|md| | Hour 1-12|h|Numeric: minimum digits|1, 12| | |hh|Numeric: 2 digits + zero padded|01, 12| | Hour 0-23|H|Numeric: minimum digits|0, 23| | |HH|Numeric: 2 digits + zero padded|00, 23| | Minute|m|Numeric: minimum digits|8, 59| | |mm|Numeric: 2 digits + zero padded|08, 59| | Second|s|Numeric: minimum digits|0... 59| | |ss|Numeric: 2 digits + zero padded|00... 59| | Fractional seconds|S|Numeric: 1 digit|0... 9| | |SS|Numeric: 2 digits + zero padded|00... 99| | |SSS|Numeric: 3 digits + zero padded (= milliseconds)|000... 999| | Zone|z, zz & zzz|Short specific non location format (fallback to O)|GMT-8| | |zzzz|Long specific non location format (fallback to OOOO)|GMT-08:00| | |Z, ZZ & ZZZ|ISO8601 basic format|-0800| | |ZZZZ|Long localized GMT format|GMT-8:00| | |ZZZZZ|ISO8601 extended format + Z indicator for offset 0 (= XXXXX)|-08:00| | |O, OO & OOO|Short localized GMT format|GMT-8| | |OOOO|Long localized GMT format|GMT-08:00| ## License * License: MIT ## Author * Author: SUVOJIT ## Keywords * Date Pipe * Angular V6 --- _Source: https://npm.io/package/ng-date-format · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._