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

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 {}

Use <datepicker> in app.component.html

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

Selected date is: {{ date }}

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

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 {}

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: ''
    });  
  }
}

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.