https://github.com/mezoistvan/ng2-flatpickr

Angular 2+ wrapper for flatpickr (https://github.com/chmln/flatpickr)
https://github.com/mezoistvan/ng2-flatpickr

angular angular2 angular4 angular5 angular6 angular7 angular8 angular9 datepicker flatpickr ng2-flatpickr

Last synced: about 21 hours ago
JSON representation

Angular 2+ wrapper for flatpickr (https://github.com/chmln/flatpickr)

• Host: GitHub
• URL: https://github.com/mezoistvan/ng2-flatpickr
• Owner: mezoistvan
• Created: 2017-02-24T22:54:25.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:43:54.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T19:03:41.942Z (7 months ago)
• Topics: angular, angular2, angular4, angular5, angular6, angular7, angular8, angular9, datepicker, flatpickr, ng2-flatpickr
• Language: TypeScript
• Homepage:
• Size: 1.05 MB
• Stars: 100
• Watchers: 4
• Forks: 54
• Open Issues: 48
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/mezoistvan/ng2-flatpickr.svg?branch=master)](https://travis-ci.org/mezoistvan/ng2-flatpickr)

# ng2-flatpickr

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

Examples are here: https://mezoistvan.github.io/ng2-flatpickr-examples/.

```javascript

npm install --save flatpickr ng2-flatpickr

yarn add flatpickr ng2-flatpickr

```

# How to use:

Import the Ng2FlatpickrModule to your NgModule:

```javascript

import { Ng2FlatpickrModule } from 'ng2-flatpickr';

@NgModule({

  imports: [

    Ng2FlatpickrModule

    ...

```

Example usage in a form component html template:

```javascript

```

Overwrite the default flatpickr properties by inputting any of the flatpickr options: https://chmln.github.io/flatpickr/options/ 

```javascript

import { FlatpickrOptions } from 'ng2-flatpickr';

let exampleOptions: FlatpickrOptions = {

  defaultDate: '2017-03-15'

};

```

Add locale to the options

```javascript

import { FlatpickrOptions } from 'ng2-flatpickr';

import Russian from 'flatpickr/dist/l10n/ru.js';

let exampleOptions: FlatpickrOptions = {

  locale: Russian.ru,

  ...

};

```

Set a placeholder for the input:

```javascript

```

Set a date using a string or a date object:

```javascript

let randomDateString = '1988-09-19';

let randomDateObject = new Date( 1234567891011 );

```

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

```javascript

"styles": [

  "node_modules/flatpickr/dist/flatpickr.min.css"

]

```