Календарь Ionic 2 не выбирает ion-datetime из HTML

Question

Я пытаюсь создать событие в родном календаре / устройстве. Я создал HTML-форму, которая позволяет ввести дату начала и окончания. Теперь событие создания Ionic понимает только дату начала и окончания как тип даты. Что я делаю? Как мне преобразовать строку в дату и время?

Смотрите мой код ниже:

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

Answer 1

ОК, так что я нашел решение; поделиться решением в случае, если оно поможет другим.

В дополнение к приведенному выше коду я также добавил формат даты при передаче его в функцию создания.

date;

let startDate: Date = new Date(this.date);

this.calendar.createEventInteractivelyWithOptions(this.title, this.pickUpLocation, this.description, new Date(startDate), new Date(startDate))
}

Answer 2

Установите переменную, в которой вы хотите сохранить входные значения, с помощью атрибута ngModel.

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

В функции createEvent вы должны преобразовать строку даты в дату:

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