Angular2 Datepicker Component
ng2-datepicker is a datepicker component for Angular2.
http://ng2-datepicker.jankuri.com
Install ng2-datepicker via npm
npm install ng2-datepicker --saveThen 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 examples are based on a project created with Angular CLI + Angular 2.0.0+
Option A: Using ng2-datepicker with ngModel
- Import
DatePickerModuleinapp.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 {}- Use
<ng2-datepicker>inapp.component.html
<ng2-datepicker [(ngModel)]="date"></ng2-datepicker>
Selected date is: {{ date }}Option B: Using ng2-datepicker with FormBuilder (ReactiveFormsModule)
- Import
DatePickerModuleandReactiveFormsModuleinapp.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 {}- 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
<ng2-datepicker>withformControlNameinapp.component.html
<form [formGroup]="dataForm">
<ng2-datepicker formControlName="date"></ng2-datepicker>
</form>Options can be passed to <ng2-datepicker> component via property bindings.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
class |
string | No | '' |
CSS class name(s) to apply to datepicker's container |
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. |
<ng2-datepicker [(ngModel)]="data.date"></ng2-datepicker>
<ng2-datepicker [(ngModel)]="data2.date" class="danger"></ng2-datepicker>
<ng2-datepicker [(ngModel)]="data3.date" class="success"></ng2-datepicker>
<ng2-datepicker [(ngModel)]="data4.date" class="warning"></ng2-datepicker>This project is licensed under the MIT license. See the LICENSE file for more info.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent