How to display DatePicker?

Ionic Framework ionic-v3
1

I want to display Datepicker in page as soon as it opens.The page should looks like the below image.

image
image1080×1920 63.9 KB
Image 1

My XML code looks like this.

  <DatePicker
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/datePicker"
        android:layout_gravity="center_horizontal|top"
        android:headerBackground="?attr/colorPrimary"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        />

But when i used DatePicker in ionic it displays as below image.

image
image1080×1920 75.4 KB
Image 2

constructor(platform: Platform) {
platform.ready().then(() => {
let options = {
date: new Date(),
mode: ‘date’
}

  DatePicker.show(options).then(
    date => {
      alert('Selected date: ' + date);
    },
    error => {
      alert('Error: ' + error);
    }
  );
});

}

So my question is how to get DatePicker as in Image 1. Not like a popup as in Image 2.

2

Hey,I’m really new on Ionic v2 and I also wanna display a DatePicker like yours.
Can you tell me how to create one like yours? Please.