node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »

ng2-pickadate

# ng2-pickadate

An Angular2 component for pickadate.js. See the changelog for more information.

Demo

Usage

import { Component } from '@angular/core';
 
@Component({
   selector: 'my-app',
   template: `<ng2-pickadate
               [min]="minDate"
               (select)="onSelect($event)"
               formControlName="date"
               modelFormat="DD.MM.YYYY">`
})
export class AppComponent {
   public minDate: Date = new Date();
 
   public onSelect(timestamp): void {
       console.log(timestamp)
   }
}
 

Remind binding components and modules with NgModule (explained in Angular CLI Configuration)

  • The input value given by the form is by default a timestamp (analog to the amsul's pickadate). If you provide the property modelFormat with a valid dateformat, the model value is interpreted with that. Min and max Date should be set using the display format.

Requirements

Installation

Themes

Themes will be supported later on. For the moment you can use the default css styles provided by pickadate.js:

<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/default.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/default.date.css" rel="stylesheet">

There is also a nice way to bind the theme from the peer-dependency pickadate.js using sass:

@import "~pickadate/lib/compressed/themes/classic";
@import "~pickadate/lib/compressed/themes/classic.date";