angular - Ionic 2 calendar does not pick ion-datetime from html -
i trying creat event in native/device calendar. have created html form allows enter start , end date. now, ionic create event understands start , end date date type. do? how convert string datetime ot so?
see 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: = ''; enddate: = ''; constructor(public calendar: calendar) { } createevent() { this.calendar.createeventwithoptions(this.title, null, this.details, this.startdate, this.enddate).then(() => { alert("success"); }, () => { alert("fail"); }); }
set variable in want save input values 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 have convert date string 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"); }); } }
Comments
Post a Comment