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