Ionic 2 日历不从 html 中选择离子日期时间

Question

我正在尝试在 native/device 日历中创建活动。我创建了 html 表单，允许输入开始和结束日期。现在，Ionic create event 仅将开始日期和结束日期理解为日期类型。我该怎么办？如何将字符串转换为日期时间？

请参阅下面的代码：

<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

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

Answer 2

好的，所以我找到了解决方案；分享解决方案，以防对他人有所帮助。

除了上面的代码，我还在创建函数中传递日期格式时添加了日期格式。

date;

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

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

Ionic 2 日历不从 html 中选择离子日期时间

Ionic 2 calendar does not pick ion-datetime from html

angular

cordova

calendar

ionic2

ionic-native