Search code examples
angularcordovacalendarionic2ionic-native

Ionic 2 calendar does not pick ion-datetime from html


I am trying to creat event in native/device calendar. I have created html form which allows to enter start and end date. Now, Ionic create event only understands start and end date as date type. What do I do? How do I convert string to datetime ot so?

See my code below:

<ion-content>
  <ion-item>
    <ion-label>Title</ion-label>
    <ion-input type="text" name="title" [value]="" (input)="title= $event.target.value"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Details</ion-label>
    <ion-input type="text" name="details" [value]="" (input)="details= $event.target.value"></ion-input>
  </ion-item>


  <ion-item>
    <ion-label>Start Date</ion-label>
    <ion-datetime displayFormat="MMM DD, YYYY HH:mm" pickerFormat="MMM DD, YYYY HH:mm" name="startDate" (input)="startDate = $event.target.value"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>End Date</ion-label>
    <ion-datetime displayFormat="MMM DD, YYYY HH:mm" pickerFormat="MMM DD, YYYY HH:mm" name="endDate" (input)="endDate = $event.target.value"></ion-datetime>
  </ion-item>

</ion-content>

title: string = '';
details: string = '';
startDate: any = '';
endDate: any = '';

constructor(public calendar: Calendar) {

}

createEvent() {

  this.calendar.createEventWithOptions(this.title, null, this.details, this.startDate, this.endDate).then(() => {
    alert("success");
  }, () => {
    alert("Fail");
  });
}


Solution

  • Ok SO I found the solution; sharing the solution in case it help others.

    In addition to above code, I also added date format while passing it in the create function.

    date;
    
    let startDate: Date = new Date(this.date);
    
    this.calendar.createEventInteractivelyWithOptions(this.title, this.pickUpLocation, this.description, new Date(startDate), new Date(startDate))
    }