This is a component that shows a date picker to select a date.
Install using npm
$ npm install ionic2-date-picker --save
Add the component in the app.module.ts
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DatePicker } from 'ionic2-date-picker/ionic2-date-picker';
@NgModule({
declarations: [
MyApp,
HomePage,
DatePicker
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DatePicker
],
providers: []
})
export class AppModule {}
Import the module in the page that requires the date picker:
<ion-content padding>
The world is your oyster.
<p>
If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
</p>
<button (click)="showCalendar()">Show Calendar</button>
</ion-content>
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DatePicker } from 'ionic2-date-picker/ionic2-date-picker';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [ DatePicker ]
})
export class HomePage {
constructor(public navCtrl: NavController, public datePicker: DatePicker) {
this.datePicker.onDateSelected.subscribe(
(date) => {
console.log(date);
});
}
showCalendar(){
this.datePicker.showCalendar();
}
}