ng2-pickadate

An Angular2 date picker based on pickadate.js

Usage no npm install needed!

<script type="module">
  import ng2Pickadate from 'https://cdn.skypack.dev/ng2-pickadate';
</script>

README

# 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";