Dynastech Angular Flatpickr

Install

yarn add @dynastech/angular-flatpickr flatpickr

Import Module

import { DgFlatpickrModule } from '@dynastech/angular-flatpickr';

@NgModule({
  imports: [DgFlatpickrModule]
})
export class AppModule { }

Import Style

@use '~flatpickr/dist/flatpickr';

Usage

Directive on plain input

<input dgFlatpickr [value]="value" [mode]="mode" [enableTime]="enableTime" [noCalendar]="noCalendar" [disabled]="disabled" [readonly]="readonly" [open]="open" (flatpickrChange)="onChange($event)" (flatpickrOpen)="onOpen($event)" (flatpickrClose)="onClose($event)">

Directive on mdc text field

<mdc-text-field dgFlatpickr [value]="value" [mode]="mode" [enableTime]="enableTime" [noCalendar]="noCalendar" [disabled]="disabled" [readonly]="readonly" [open]="open" (flatpickrChange)="onChange($event)" (flatpickrOpen)="onOpen($event)" (flatpickrClose)="onClose($event)">
</mdc-text-field>

Directive with form

<input dgFlatpickr [(ngModel)]="value">

<mdc-text-field dgFlatpickr [(ngModel)]="value"></mdc-text-field>

Options

See flatpickr official document