ngx-flatpickr-wrapper
v17.0.0-rc.1
Published
Angular wrapper for flatpickr
Downloads
374
Maintainers
Readme
ngx-flatpickr-wrapper
A lightweight Angular wrapper for flatpickr, which is usable in reactive forms inside Angular.
Examples are here: https://mezoistvan.github.io/ngx-flatpickr-wrapper-examples/.
npm i flatpickr ngx-flatpickr-wrapper
yarn add flatpickr ngx-flatpickr-wrapper
How to use:
import { NgxFlatpickrWrapperComponent } from 'ngx-flatpickr-wrapper';
imports: [
...
NgxFlatpickrWrapperComponent,
...
],
...
})
Example usage in a form component html template:
<ngx-flatpickr-wrapper formControlName="formControlName"></ngx-flatpickr-wrapper>
Overwrite the default flatpickr properties by inputting any of the flatpickr options: https://chmln.github.io/flatpickr/options/
import { FlatpickrOptions } from 'ngx-flatpickr-wrapper';
let exampleOptions: FlatpickrOptions = {
defaultDate: '2017-03-15'
};
<ngx-flatpickr-wrapper [config]="exampleOptions" formControlName="formControlName"></ngx-flatpickr-wrapper>
Add locale to the options
import { FlatpickrOptions } from 'ngx-flatpickr-wrapper';
import Russian from 'flatpickr/dist/l10n/ru.js';
let exampleOptions: FlatpickrOptions = {
locale: Russian.ru,
...
};
<ngx-flatpickr-wrapper [config]="exampleOptions" formControlName="formControlName"></ngx-flatpickr-wrapper>
Set a placeholder for the input:
<ngx-flatpickr-wrapper placeholder="Pick a date!" formControlName="formControlName"></ngx-flatpickr-wrapper>
Set a date using a string or a date object:
let randomDateString = '1988-09-19';
let randomDateObject = new Date( 1234567891011 );
<ngx-flatpickr-wrapper [setDate]="randomDateString" formControlName="formControlName"></ngx-flatpickr-wrapper>
<ngx-flatpickr-wrapper [setDate]="randomDateObject" formControlName="formControlName"></ngx-flatpickr-wrapper>
Flatpickr css needs to be loaded separately. when using @angular/cli
, load it in angular.json
.
"styles": [
"node_modules/flatpickr/dist/flatpickr.min.css"
]
Development Guidelines
Code Formatting
This project uses Prettier for code formatting. To ensure consistent code style, please format your code using Prettier before submitting any changes.
To format the codebase, run the following command:
npm run format
Special Thanks
This project, ngx-flatpickr-wrapper, was inspired by and built upon the foundational work of ng2-flatpickr, created by Mező István.
License
MIT © Angel Careaga