Manzurkds/ng2-datepicker

Angular2 Datepicker Component

ng2-datepicker

Angular 2+ Simple and minimal datepicker component

Installation

1. Install package from npm.

npm install ng2-datepicker --save

2. Include NgDatepickerModule into your application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgDatepickerModule } from 'ng2-datepicker';

@NgModule({
  imports: [
    BrowserModule,
    NgDatepickerModule
  ],
  declarations: [ AppComponent ],
  exports: [ AppComponent ]
})
export class AppModule {}

Example

  <ng-datepicker [(ngModel)]="date" />

Additional attributes

Name	Type	Default	Description
headless	boolean	false	Disable datepicker's input
isOpened	boolean	false	Show or hide datepicker
position	string	bottom-right	Dropdown position (bottom-left, bottom-right, top-left, top-right)

Options

import { DatepickerOptions } from 'ng2-datepicker';
import * as frLocale from 'date-fns/locale/fr';

options: DatepickerOptions = {
  minYear: 1970,
  maxYear: 2030,
  displayFormat: 'MMM D[,] YYYY',
  barTitleFormat: 'MMMM YYYY',
  dayNamesFormat: 'dd',
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
  locale: frLocale,
  minDate: new Date(Date.now()), // Minimal selectable date
  maxDate: new Date(Date.now()),  // Maximal selectable date
  barTitleIfEmpty: 'Click to select year',
  placeholder: 'Enter Date'
};

For available format options check out here.

Run Included Demo

1. Clone this repository

git clone https://github.com/jkuri/ng2-datepicker.git
cd ng2-datepicker

2. Install packages

npm install

3. Run Demo

npm start

Licence

MIT