How do I use ionic 2 datepicker plugin with ion-input? Any other alternative?

Question

I am trying to use ionic native datepicker plugin. I am trying to use it with ion-input. upon click it should be able to select date and show the value in the input field. Unfortunately, when I use type ="date", it does pick and enter value from pop up calendar but at the same time it opens up two calendar. and If I change type to text or anything else, it pops up the calendar and doesn't allow me to select and enter value to field.

With time, I am not sure which type should I use?

Something like this In this you can see, when I click on input field, it opens light calendar behind the dark one

Also, is there anything else other than ion-input which I can use as a form field?

Below is my code:

<ion-item>
  <ion-label floating>Date</ion-label>
  <ion-input type="date" (input)="date = $event.target.value" [(ngModel)]="date" (click)="showCalendar()"></ion-datepicker>
</ion-item>

<ion-item>
  <ion-label floating>Time</ion-label>
  <ion-input (input)="time = $event.target.value" [(ngModel)]="time" (click)="showTime()" ion-time-picker></ion-datepicker>
</ion-item>

home.ts

showCalendar() {

  this.datePicker.show({
    date: new Date(),
    mode: 'date',
    titleText: 'set Date',
    androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
  }).then(
    date => console.log('Got date: ', date),
    err => console.log('Error occurred while getting date: ', err)
  );

}
showTime() {

  this.datePicker.show({
    date: new Date(),
    mode: 'time',
    androidTheme: this.datePicker.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT
  }).then(
    date => console.log('Got date: ', date),
    err => console.log('Error occurred while getting date: ', err)
  );

}

you can try using ` it, it also invoke native date picker and change css to match ion-input. — Swapnil Patwa, Jul 22 '17 at 08:18
@SwapnilPatwa Thanks for ur answer. As you can see in html file, I am already using type="date" but unfortunately it invokes two calendar instead of one. How do I solve that? — JBhatt, Jul 24 '17 at 13:19
@SwapnilPatwa I tried removing click event; it worked. Does this mean I am not calling cordova datepicker native plugin? or its being called by type="date" ? — JBhatt, Jul 24 '17 at 16:42
Yes, if it is ok for you then you don't need cordova datepicker native plugin? — Swapnil Patwa, Jul 24 '17 at 16:45
@SwapnilPatwa yeah it solved problem. I wanted to use datepicker plugin so that I can use different android themes. Also, this worked but I am still wondering how to use datepicker plugin in forms as an input field or something. — JBhatt, Jul 24 '17 at 16:51

score 1 · Accepted Answer · answered Jul 24 '17 at 16:55

so the final html code looks like below. Might be helpful to others:

<ion-item>
  <ion-label floating>Date</ion-label>
  <ion-input type="date" (input)="date = $event.target.value"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Time</ion-label>
  <ion-input type="time" (input)="time = $event.target.value"></ion-input>
</ion-item>

How do I use ionic 2 datepicker plugin with ion-input? Any other alternative?

1 Answers1