angularx flatpickr

Demo

https://mattlewis92.github.io/angularx-flatpickr/

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

An angular 17.0+ wrapper for flatpickr

Installation

Install through npm:

npm install flatpickr angularx-flatpickr

Next, in your angular.json add "node_modules/flatpickr/dist/flatpickr.css" to the styles array of your application

Then use in one of your apps components:

import { Component } from '@angular/core';
import { FlatpickrDirective, provideFlatpickrDefaults } from 'angularx-flatpickr';

@Component({
  imports: [FlatpickrDirective],
  providers: [provideFlatpickrDefaults()],
  template: `<input type="text" mwlFlatpickr [(ngModel)]="selectedDate" [altInput]="true" [convertModelValue]="true" />`,
  standalone: true,
  selector: 'my-component',
})
export class MyComponent {}

You may also find it useful to view the demo source.

Documentation

All documentation is auto-generated from the source via compodoc and can be viewed here: https://mattlewis92.github.io/angularx-flatpickr/docs/

Development

Prepare your environment

• Install Node.js (>=14.19.0 or >=16.9.0)
• Install pnpm: corepack enable
• Install local dev dependencies: pnpm install while current directory is this repo

Development server

Run pnpm start to start a development server on port 8000 with auto reload + tests.

Testing

Run pnpm test to run tests once or pnpm test:watch to continually run tests.

Release

pnpm run release

License

MIT

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

8.1.0 (2024-11-28)

Features

• convert to standalone (73d51bc), closes #57 #56

8.0.0 (2024-08-21)

⚠ BREAKING CHANGES

• support for angular 16 has been removed. Please use this package with angular 17 or higher
• support for angular 15 has been removed. Please use this package with angular 16 or higher
• support for angular 14 has been removed. Please use this package with angular 15 or higher

Features

• upgrade angular v16 (#54) (ece59d4)
• upgrade angular v17 (#55) (0ef8674)
• upgrade to Angular 15 (#53) (e15af4a)

7.3.0 (2023-04-26)

Features

• add allowInvalidPreload input (#52) (33d5d24)

7.2.0 (2023-04-14)

Features

• add minTime and maxTime inputs (#51) (0c92a9b)

7.1.0 (2023-03-23)

Features

• add ignoredFocusElements input (#50) (da15442)

7.0.0 (2022-08-15)

⚠ BREAKING CHANGES

• angular 14 or higher is now required to use this package

build

• upgrade to angular 14 (#49) (bd5419f)

6.6.0 (2021-07-06)

Features

• expose the flatpickr instance so you can call its methods (7270193)

6.5.3 (2021-07-05)

Bug Fixes

• fix being able to select dates (fe324c8)

6.5.2 (2021-02-02)

Bug Fixes

• export FlatpickrDirective (1ca2abf)

6.5.1 (2020-09-18)

Bug Fixes

• handle directive being destroyed before the view is created (0fe12a3)

6.5.0 (2020-09-12)

Features

• add monthSelectorType option (e12ee40)

6.4.0 (2020-08-21)

Features

• add common options attribute (7731a7b)

6.3.1 (2020-03-01)

Bug Fixes

• workaround bug in flatpickr where the alt input class wouldn't be set (519caf3), closes #40

6.3.0 (2020-02-15)

Features

• add defaultSeconds option (74c6ef6)

6.2.0 (2019-12-30)

Features

• add showMonths option (2e64c2d)

6.1.1 (2019-09-17)

Bug Fixes

• set default locale (2f35353)

6.1.0 (2018-09-18)

Features

• support for an alternate 'now' date (e.g. non-localtime for different TZ) (d4c3866)

6.0.0 (2018-07-02)

Features

• update flatpickr to latest version (c407b3e)

BREAKING CHANGES

• flatpickrFactory and FLATPICKR injection token are no longer needed and were removed. To migrate just remove the first argument you pass to FlatpickrModule.forRoot

A minimum version of flatpickr 4.5.0 or higher is now required to use this library

5.0.2 (2018-06-20)

Bug Fixes

• parse date in same way as flatpickr does it (9e38827)
• directive: fix setDisabledState behaviour (eac1055)

5.0.1 (2018-05-16)

Bug Fixes

• mark the form control when touched (d3c783e)
• mark the input as disabled when used with reactive forms (2c1122c), closes #15

5.0.0 (2017-12-24)

Features

• upgrade to angular 5 (d764610)

BREAKING CHANGES

• Angular 5 or higher is now required to use this package

4.0.1 (2017-11-08)

Bug Fixes

• allow angular 5 peer dependency (684395e)

4.0.0 (2017-10-22)

Bug Fixes

• aot: allow the lib to compile with aot (12c76e8), closes #7

BREAKING CHANGES

• aot: the value you pass to the forRoot method for flatpickr has changed. The new signature is:

import { NgModule } from '@angular/core';
import * as flatpickr from 'flatpickr';
import { FlatpickrModule, FLATPICKR } from 'angularx-flatpickr';

export function flatpickrFactory() {
  return flatpickr;
}

@NgModule({
  imports: [
    FlatpickrModule.forRoot({
      provide: FLATPICKR,
      useFactory: flatpickrFactory
    })
  ]
})
class MyModule {}

3.0.0 (2017-10-18)

Bug Fixes

• support latest flatpickr (b66000d)

Features

• upgrade flatpickr to v4 (0fa4335), closes #4 #5

BREAKING CHANGES

• flatpickr is now a peer dependency of this module. You must now add it as an explicit dependency, import it and pass it to the first argument of FlatpickrModule.forRoot

2.0.1 (2017-08-17)

Bug Fixes

• update model value even if convertModelValue is false (cd5374a)
• use input event instead of change event to detect flatpicker changes (fc6f751)

2.0.0 (2017-08-11)

Bug Fixes

• make the directive to work with reactive forms (e619706), closes #1

Features

• upgrade flatpickr to v3 (ea73c66)

BREAKING CHANGES

• flatpickr has been upgraded to v3. The utc was removed from this lib as it was removed from flatpickr
• the forms module is now required to use this component

1.0.0 (2017-04-07)

Features

• initial implementation (acbd9ac)