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 inapp.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>
inapp.component.html
<datepicker [(ngModel)]="date" [expanded]="true"></datepicker>
Selected date is: {{ date }}
Option B: Using ng2-datepicker with FormBuilder
(ReactiveFormsModule)
- Import
DatePicker
component andReactiveFormsModule
inapp.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>
withformControlName
inapp.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.