ng2-datepicker

Angular2 Datepicker Component

ng2-datepicker is a datepicker component for Angular2.

Demo

http://ng2-datepicker.jankuri.com

Installation:

Install ng2-datepicker via npm

npm install ng2-datepicker --save

Then include Ionicons's CSS in index.html

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" media="all">

Usage

Usage examples are based on a project created with Angular CLI + Angular 2.0.0+

Option A: Using ng2-datepicker with ngModel

1. Import DatePicker component in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { DatePicker } from 'ng2-datepicker/ng2-datepicker';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    Appcomponent,
    DatePicker
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. Use <datepicker> in app.component.html

<datepicker [(ngModel)]="date" [expanded]="true"></datepicker>

Selected date is: {{ date }}

Option B: Using ng2-datepicker with FormBuilder (ReactiveFormsModule)

1. Import DatePicker component and ReactiveFormsModule in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DatePicker } from 'ng2-datepicker/ng2-datepicker';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    Appcomponent,
    DatePicker
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. Create FormControl for date field in app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  dataForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.dataForm = this.formBuilder.group({
      date: ''
    });  
  }
}

3. Use <datepicker> with formControlName in app.component.html

<form [formGroup]="dataForm">
  <datepicker formControlName="date" [expanded]="true"></datepicker>
</form>

API

Options can be passed to <datepicker> component via property bindings.

Property	Type	Required	Default	Description
class	string	No	''	CSS class name(s) to apply to datepicker's container
expanded	boolean	No	false	If set to true, calendar always displays the selected date
opened	boolean	No	false	Set to true to open the calendar by default
format	string	No	YYYY-MM-DD	Date format of the calendar. This will be bound to the model as the date's value.
viewFormat	string	No	D MMMM YYYY	Date format to display in the view.
firstWeekdaySunday	boolean	No	false	Set to true to set first day of the week in calendar to Sunday instead of Monday.

Example from demo:

<datepicker [(ngModel)]="data.date" [expanded]="true"></datepicker>
<datepicker [(ngModel)]="data2.date" [expanded]="true" class="danger"></datepicker>
<datepicker [(ngModel)]="data3.date" [expanded]="true" class="success"></datepicker>
<datepicker [(ngModel)]="data4.date" [expanded]="true" class="warning"></datepicker>
<datepicker [(ngModel)]="data5.date"></datepicker>

Licence

This project is licensed under the MIT license. See the LICENSE file for more info.