离子2日历不会从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"); 
     }); 
    } 
    }