Integrating DatePicker into an Ionic 2 application is fairly easy. this post cover's on how to integrate/implement DatePicker in an ionic 2 application. I assume you have already created an ionic project.

Run the Following Command to create a new page in ionic project

 ionic generate page datePicker

see the below image for reference.


Once the page is created, open the date-picker.ts file in date-picker folder.

Copy & Pase the Below code in your date-picker.ts file

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

/*
  Generated class for the DatePicker page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-date-picker',
  templateUrl: 'date-picker.html'
})
export class DatePickerPage {
  event = { title:'',location:'',timeStarts: '',timeEnds: '',startDate:'',endDate:''}
  eventList:any=[];
  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad DatePickerPage');
  }


  saveData(event){
     console.log("event",event)
     this.eventList.push(event)
  }

}

Copy & paste the below html code to date-picker.html

<!--
  Generated template for the DatePicker page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>datePicker</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <ion-item class="customBorder">
      <ion-input placeholder="Title"  [(ngModel)]="event.title"></ion-input>
    </ion-item>
    <ion-item class="customBorder">
      <ion-input placeholder="Location"  [(ngModel)]="event.location"></ion-input>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item class="customBorder">
      <ion-label>Start Date</ion-label>
      <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.startDate"></ion-datetime>
    </ion-item>


    <ion-item class="customBorder">
      <ion-label>Start Time</ion-label>
      <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
    </ion-item>

    <ion-item class="customBorder">
      <ion-label>End Date</ion-label>
      <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.endDate"></ion-datetime>
    </ion-item>

   <ion-item class="customBorder">
      <ion-label>End Time</ion-label>
      <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeEnds"></ion-datetime>
    </ion-item>
   
  </ion-list>

<button ion-button full (click)="saveData(event)">Save</button>

<ion-list>
  <div ion-item *ngFor="let item of eventList" (click)="itemSelected(item)" style="background-color: #dadada;">
 <ion-card >
  <ion-card-header>
    {{item.title}}
  </ion-card-header>
  <ion-card-content>
  {{item.location}}  
  </ion-card-content>
</ion-card>
    <ion-row no-padding>
      <ion-col>
        <button ion-button clear small color="danger" icon-start>
            Start Date: 
            {{item.startDate}}          
        </button>
      </ion-col>
      <ion-col text-center>
        <button ion-button clear small color="danger" icon-start>
            EndDate:        
           {{item.endDate}}
        </button>
      </ion-col>

    </ion-row>
  </div>  
</ion-list>

</ion-content>

Copy & Pase the Below css in your date-picker.scss file

.customBorder{
  border: 1px solid #7fabf7 !important;
  margin-top: 5px;
}

after the application is finished building, your app date-picker page view will look as follows.