Select Date and Time in 2 steps using Ionic DateTime: I want to use Ionic DateTime selecting date and time. The problem is that the picker with pickerFormat="DD MMMM YYYY HH:mm" gets plicated and too narrow, so I want to select date first and just after select the time. Any idea about how to do so?

Select Date and Time in 2 steps using Ionic DateTime: I want to use Ionic DateTime selecting date and time. The problem is that the picker with pickerFormat="DD MMMM YYYY HH:mm" gets plicated and too narrow, so I want to select date first and just after select the time. Any idea about how to do so?

• javascript
• angular
• ionic-framework
• ionic2
• ionic3

Share Improve this question Follow edited Mar 2, 2018 at 23:54 Melchia 24.4k2323 gold badges108108 silver badges129129 bronze badges asked Mar 2, 2018 at 21:14 Rafael López MartínezRafael López Martínez 2,26522 gold badges1717 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can always separate them like this

<ion-item [hidden]="!!myDate">
      <ion-label>Date</ion-label>
      <ion-datetime (ngModelChange)="change(datePicker)" displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
    </ion-item>
    <ion-item [hidden]="!myDate" >
      <ion-label>Time</ion-label>
      <ion-datetime #datePicker
      (ionCancel)="myDate=undefined" displayFormat="HH:mm" [(ngModel)]="myTime"></ion-datetime>
    </ion-item>

    <h1 [hidden]="!myTime">result is {{myDate}} : {{myTime}} </h1>

then in ts

change(datePicker){    
  datePicker.open();
}

Then concatenate the results

this.dateTime= this.myDate + ":" + this.myTime;

Here's a DEMO