Skip to content
Angular 2+ wrapper for flatpickr (
Branch: master
Clone or download
Mező István
Mező István Release v7.0.2
Latest commit 9b5c482 Feb 28, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Release v7.0.2 Feb 28, 2019
src Check if _flatpickr object was initialized before trying to use setDa… Feb 28, 2019
.travis.yml updating dependencies May 16, 2018
dist.tgz Release v7.0.2 Feb 28, 2019
package-lock.json Release v7.0.1 Jan 29, 2019
public_api.ts Add packagr, make it compatible with AOT Jan 23, 2018

Build Status


ng2-flatpickr is a lightweight Angular wrapper for flatpickr, which is usable in reactive forms inside Angular.

Examples are here:

npm install --save flatpickr ng2-flatpickr
yarn add flatpickr ng2-flatpickr

For RxJS v5 use ^5.0.2 and for RxJS v6 use ^6.0.2.

Your bundle size will thank you for that.

npm install --save flatpickr ng2-flatpickr@5.0.2
yarn add flatpickr ng2-flatpickr@5.0.2


npm install --save flatpickr ng2-flatpickr@6.0.2
yarn add flatpickr ng2-flatpickr@6.0.2

How to use:

Import the Ng2FlatpickrModule to your NgModule:

import { Ng2FlatpickrModule } from 'ng2-flatpickr';

  imports: [

Example usage in a form component html template:

<ng2-flatpickr formControlName="formControlName"></ng2-flatpickr>

Overwrite the default flatpickr properties by inputting any of the flatpickr options:

import { FlatpickrOptions } from 'ng2-flatpickr';

let exampleOptions: FlatpickrOptions = {
  defaultDate: '2017-03-15'

<ng2-flatpickr [config]="exampleOptions" formControlName="formControlName"></ng2-flatpickr>

Add locale to the options

import { FlatpickrOptions } from 'ng2-flatpickr';
import Russian from 'flatpickr/dist/l10n/ru.js';

let exampleOptions: FlatpickrOptions = {

<ng2-flatpickr [config]="exampleOptions" formControlName="formControlName"></ng2-flatpickr>

Set a placeholder for the input:

<ng2-flatpickr placeholder="Pick a date!" formControlName="formControlName"></ng2-flatpickr>

Set a date using a string or a date object:

let randomDateString = '1988-09-19';
let randomDateObject = new Date( 1234567891011 );

<ng2-flatpickr [setDate]="randomDateString" formControlName="formControlName"></ng2-flatpickr>
<ng2-flatpickr [setDate]="randomDateObject" formControlName="formControlName"></ng2-flatpickr>

Flatpickr css needs to be loaded separately. when using @angular/cli, load it in angular-cli.json.

"styles": [

From v6, in angular.json:

"styles": [
You can’t perform that action at this time.