ng2-datepicker-with-commit-c0fd0e9ae096e0a6b37634cd1cdbef705fbc9d67 v1.4.9

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 DatePickerModule 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 { DatePickerModule } from 'ng2-datepicker';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       Appcomponent
     ],
     imports: [
       BrowserModule,
       FormsModule,
       HttpModule,
       DatePickerModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule {}

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

   <ng2-datepicker [(ngModel)]="date"></ng2-datepicker>
   
   Selected date is: {{ date }}

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

1. Import DatePickerModule 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 { DatePickerModule } from 'ng2-datepicker';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       Appcomponent
     ],
     imports: [
       BrowserModule,
       FormsModule,
       HttpModule,
       ReactiveFormsModule,
       DatePickerModule
     ],
     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 <ng2-datepicker> with formControlName in app.component.html

   <form [formGroup]="dataForm">
     <ng2-datepicker formControlName="date"></ng2-datepicker>
   </form>

API

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

For input [options] please see this.

Events

You can subscribe to (outputEvents) or pass event to the datepicker component via [inputEvents].

Example from demo:

<ng2-datepicker [(ngModel)]="data.date"></ng2-datepicker>
<ng2-datepicker [(ngModel)]="data2.date"></ng2-datepicker>
<ng2-datepicker [(ngModel)]="data3.date"></ng2-datepicker>
<ng2-datepicker [(ngModel)]="data4.date"></ng2-datepicker>

Licence

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