ionic2-date-picker-eprod

Ionic 2 Date Picker

Description

This is a component that shows a date picker to select a date.

Preview

Getting Started

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();
  }
 
}