/ng2-datepicker

Angular2 Datepicker Component

Primary LanguageTypeScriptMIT LicenseMIT

ng2-datepicker

Angular 2+ Simple and minimal datepicker component

AbstruseCI

Installation

  1. Install package from npm.
npm install ng2-datepicker --save
  1. 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',
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
  locale: frLocale
};

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
  1. Install packages
npm install
  1. Run Demo
npm start

Licence

MIT