MaterialDayjsAdapter


An adapter to use [Dayjs]() instead of [MomentJS]() in an effort to reduce dependency size. Feel free to create an issue or submit a PR.

If coming from @angular/material-moment-adapter, using the default locale and UTC plugins you can reduce your dependency size by ~560kb

Heavily inspired by @angular/material-moment-adapter NPM.

This library was generated with Angular CLI version 8.2.14.

$3

Dependency Size Reduction

MomentJS comes bundled with a lot of stuff that you may not need--for instance, locales. If you find that MaterialDayJsAdapter suits your needs well, you could see some substantial size cost savings. In most situations you will see a reduction of ~560kb in webpack-bundle-analyzer.

$3

Using a brand new app generated with the @angular/cli, an app was set up using both MomentJS Date Adapter and Dayjs Date Adapter. Production build statistics were then analyzed with webpack-bundle-analyzer.

#### Stats
| Chunk Name | MomentJS | Dayjs | Size Reduction |
| ----------------------------- | :------: | :-----: | -------------: |
| chunk {0} runtime-es2015.js | 1.45 kB | 1.45 kB | 0% |
| chunk {0} runtime-es5.js | 1.45 kB | 1.45 kB | 0% |
| chunk {1} main-es2015.js | 775 kB | 42 kB | 43% |
| chunk {1} main-es5.js | 838 kB | 505 kB | 40% |
| chunk {2} polyfills-es2015.js | 36.4 kB | 36.4 kB | 0% |
| chunk {3} polyfills-es5.js | 123 kB | 123 kB | 0% |
| chunk {4} styles.css | 62.7 kB | 62.7 kB | 0% |

#### MomentJS
Minimal Project with MomentJS Date Adapter
!momentjs date adapter bundle size analyzer graph
!momentjs cli stats

#### Dayjs
Minimal Project with Dayjs Date Adapter
!dayjs date adapter bundle size analyzer graph
!dayjs cli stats

Schematics

As of v2.x.x, schematics support was added to make usage a bit more congruent with Angular Library standards.

$3

We have very basic NgAdd support that will install app dependencies.
(Please submit an issue if you think updating the AppRoot's NgModule with the proper imports would be a nice feature!)

``bash
ng add @tabuckner/material-dayjs-adapter
`

$3

In the event you would like to make use of custom [Date Formats](), a schematic has been added to make the generation of these files a bit easier.

#### Command
`bash
ng g @tabuckner/material-dayjs-adapter:date-formats
`

#### Options
* --path: The path to create the file at.
* --project: The name of the project.

#### What It Does
This will create mat-dayjs-date-formats.ts at the current file path (or an optionally specified path) with the following contents:

`typescript
import { MatDateFormats } from '@angular/material/core';

/**
* Custom Date-Formats and Adapter (using https://github.com/iamkun/dayjs)
*/
export const MAT_DAYJS_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: 'MM/DD/YYYY',
},
display: {
dateInput: 'MM/DD/YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
}
};
`
(Please submit an issue if you think updating the AppRoot's NgModule with the proper imports would be a nice feature!)

How To Use

$3

`typescript
import { MatDayjsDateModule } from '@tabuckner/material-dayjs-adapter';

@NgModule({
...
imports: [
...
MatDatepickerModule,
MatDayjsDateModule,
...
],
...
})
export class AppModule { }
`

$3


`typescript
import { MatDayjsDateModule, MAT_DAYJS_DATE_ADAPTER_OPTIONS } from '@tabuckner/material-dayjs-adapter';
@NgModule({
...
providers: [
{ provide: MAT_DAYJS_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
],
...
})
export class AppModule { }
`

$3

A big Thank You to @vanrossumict

Import the locales you need from DayJS and set the current locale
1. Globally for DayJS
2. To the Date Adapter itself
For example in your AppComponent:
`typescript
import { DateAdapter } from '@angular/material/core';
import dayjs, { Dayjs } from 'dayjs';
import 'dayjs/locale/nl';
...
export class AppComponent {
constructor(private dateAdapter: DateAdapter) {
this.setLocale('nl');
}
setLocale(locale: string) {
dayjs.locale(locale);
this.dateAdapter.setLocale(locale);
}
...
`


#### Currently Supported Options
`typescript
export interface DayJsDateAdapterOptions {
/**
* Turns the use of utc dates on or off.
* Changing this will change how Angular Material components like DatePicker output dates.
* {@default false}
*/
useUtc?: boolean;
}
`

Development

$3

Run ng generate component component-name --project material-dayjs-adapter to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project material-dayjs-adapter.
> Note: Don't forget to add --project material-dayjs-adapter or else it will be added to the default project in your angular.json file.

$3

Run ng build material-dayjs-adapter to build the project. The build artifacts will be stored in the dist/ directory.

$3

Publishing is currently handled through a dead simple CD process powered by semantic-release.

$3

Run ng test material-dayjs-adapter to execute the unit tests via Karma.

$3

To get more help on the Angular CLI use ng help` or go check out the Angular CLI README.

Contributors

@vanrossumict - Localization PR
@ranyehushua - Initialization Bug Fix
@ranyehushua - Testing Angular 9 Upgrade