I'm having trouble retrieving the user-modified value from a TimePicker. Instead of getting the modified value, I keep receiving the original value that was initially set in the control.
Below is my component template:
<TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000" style="height:90%">
<StackLayout *tabItem="{title: 'Time'}">
<TimePicker #timePicker [(ngModel)]='model.time'></TimePicker>
</StackLayout>
<StackLayout *tabItem="{title: 'Date'}">
<DatePicker #datePicker [(ngModel)]='model.date'></DatePicker>
</StackLayout>
</TabView>
<button text="Done" (tap)="onDoneTap()"></button>
And here is my component code:
export class DateTimePickerComponent
{
public mDate: Date;
public tabSelectedIndex: number;
public model: any;
constructor()
{
this.mDate = new Date();
this.model = {
date: new Date(2014, 5, 13, 2, 24),
time: new Date(2014, 5, 13, 2, 24)
};
}
private onDoneTap()
{
this.mDate.setMinutes(this.model.time.getMinutes());
this.mDate.setHours(this.model.time.getHours());
this.mDate.setDate(this.model.date.getDate());
this.mDate.setMonth(this.model.date.getMonth());
this.mDate.setFullYear(this.model.date.getFullYear());
console.log(this.mDate);
}
}
To create this, I referred to the official documentation:
- For DatePicker - utilize the date property
- For TimePicker - utilize the time property
The DatePicker in this scenario functions as expected; it initializes at 2014-05-13 and accurately reflects any changes made when tested. However, the issue arises with the TimePicker. Am I making an error specifically concerning the TimePicker implementation?
Note: I attempted to access the hour and minute properties using the ID directly but was unsuccessful. The initial value of 2:24 always persists.
@ViewChild("timePicker") timePicker: ElementRef;
let datePickerView = <TimePicker>this.timePicker.nativeElement;
console.log(datePickerView.hour); // 2
console.log(datePickerView.minute) // 24