/ng2-datepicker

Angular2 Datepicker Component

Primary LanguageCSSMIT LicenseMIT

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