Simple Way To Use Datepicker Component in Angular 2
Posted By : Lata Sahai | 21-Apr-2017
Steps For Using a simple Datepicker in your Angular 2 Project.
1. Install date picker in your project writing command - npm install mydatepicker --save
2. Now add MyDatePickerModule and import to @NgModule as below.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {MyFirstApp} from './my-first-app';
import { MyDatePickerModule} from 'mydatepicker';
@NgModule({
imports : [ BrowserModule, MyDatePickerModule ],
declarations : [ MyFirstApp ],
bootstrap : [ MyFirstApp],
})
export class MyFisrt AppModule {}
3. Now you can add a simple html in your template :
<form #myForm ="ngForm" novalidate>
<my -date-picker name="mydate" [options]="myDatePickerOptions" [(ngModel)] ="model" required> </my-date-picker>
</form>
4. Add simple code in your app ts file.
import {IMyOptions } from 'mydatepicker';
and declare variable to give date format in export class like as
export class MyFirstApp {
private myDatePickerOptions: IMyOptions = {
dateFormat :'dd.mm.yyyy',
};
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Lata Sahai
Lata is a creative UI developer having skills in HTML, CSS, Bootstrap & JavaScript. Her profession is her passion.