Ionic 2 calendar does not pick ion-datetime from html

Question

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");
  });
}

score 1 · Answer 1 · answered Jul 28 '17 at 07:20

1

Set the variable in which you want to save the input values with the ngModel attribute.

<ion-content>

  <ion-item>
    <ion-label>Title</ion-label>
    <ion-input type="text" name="title" [value]="" [(ngModel)]="title"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Details</ion-label>
    <ion-input type="text" name="details" [value]="" [(ngModel)]="details"></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" [(ngModel)]="startDateString"></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" [(ngModel)]="endDateString"></ion-datetime>
  </ion-item>

</ion-content>

In createEvent function you have to convert the date string to date:

  title: string = '';
  details: string = '';
  startDateString: string = '';
  endDateString: string = '';

  constructor(public navCtrl: NavController, public calendar:Calendar) {

  }

  createEvent() {
    // Check if dates have been selected
    if(this.startDateString.length>0 && this.endDateString.length>0){
      let startDate:Date = new Date(this.startDateString);
      let endDate:Date = new Date(this.endDateString);
      this.calendar.createEventWithOptions(this.title, null, this.details, startDate, endDate).then(() => {
        alert("success");
      }, () => {
        alert("Fail");
      });
    }
  }

answered Jul 28 '17 at 07:20

Javier Sirgo

159
2
8

Thanks for replying. But unfortunately its not working. I tried to console.log startDateString. It seems like its is not able to convert input date string to date type. Below is the result of console.log: startDateString "2017-01-01T02:00:00Z" VM795 main.js:66 startDate 1483236000000 – JBhatt Jul 28 '17 at 15:01
do you know solution for this? Below is my code : createEvent() { if(this.startDateString.length>0 && this.endDateString.length>0){ let startDate:Date = new Date(this.startDateString); let endDate:Date = new Date(this.endDateString); console.log('startDateString', JSON.stringify(this.startDateString)); console.log('startDate', +startDate); this.calendar.createEvent(this.title, null, this.details, startDate, endDate).then(() => { alert("success"); }, () => { alert("Fail"); }); } – JBhatt Jul 28 '17 at 15:04
apologize for the above. I am new to stackoverflow and I really don't know how to add code into comments :( – JBhatt Jul 28 '17 at 15:11
1

Hello JBhatt, 1483236000000 is the date value in milliseconds so apparently it's converting well to date. Have you tried to test the code in an Android / iOS Device or emulator? or just in web browser? because Calendar is a ionic-native component and requires a real device or emulated to run – Javier Sirgo Jul 28 '17 at 17:33
Hey @Javier. Yes I tried in the android device but it didn't create the calendar event. – JBhatt Jul 31 '17 at 14:05

score 1 · Accepted Answer · answered Aug 03 '17 at 22:04

1

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))
}

answered Aug 03 '17 at 22:04

JBhatt

53
2
11

Hii, i am totally lost, there is no error but its not inserting the event in calendar, please help if you can, here is my question - https://stackoverflow.com/questions/58655277/ionic-calendar-event-function-not-working – user2828442 Nov 01 '19 at 07:55

Ionic 2 calendar does not pick ion-datetime from html

2 Answers2