flatpickr for Angular 2+
<ngx-flatpickr
language="french"
placeholder="Please select a date"
[options]="options"
[default]="date"
(onDateSelect)="setDate($event)"
(onInit)="initialized($event)"
>
</ngx-flatpickr>
-
language (Input):
the language of the flatpickr instanceAll the locales from flatpickr are available, both full country names and codes can be used (Eg: "French" and "fr" both work)
A full list of all the locales can be seen in the flatpickr github repository
-
options (Input):
the placeholder text of the input fieldAll the options available can be seen on the flatpickr website
-
onInit (Output): function launched after the picker is initialized
The value returned in
$event
is the flatpickr instance -
default (Input):
the default date -
onDateSelect (Output): function launched every time a date is selected
The value returned in
$event
is an array containing the selected date(s) -
placeholder (Input):
the placeholder text of the input field
This component also works with FormControl :
<ngx-flatpickr
placeholder="Please select a date"
[formControl]="date"
>
</ngx-flatpickr>
this.date = new FormControl(new Date(), Validators.required)