Get the hours and minutes in TimePicker widget in Nativescript + Angular when click in a button

Question

The Nativescript Timepicker documentation says I can use both loaded and timeChange events in order to inteact with the dates.

However I need to get the time just when the user press a submit button. Can you give me some guidelines for achieve this? I've using @ViewChild for getting the Element by reference although seems not to be the right way to do it.

Answer 1

You can use @ViewChild to get a reference to your TimePicker and read the current time values. Still, if you prefer, you could also directly use the native loaded event to achieve the same thing.

Example with using a reference from the loaded event

time-picker.component.html

<StackLayout class="home-panel">
    <TimePicker #tp (loaded)="onTimePickerLoaded($event)" 
                [hour]="currentHour" [minute]="currentMinute" 
                verticalAlignment="center"></TimePicker>
    <Button text="Submit" (tap)="onSubmit()"></Button>
</StackLayout>

time-picker.component.ts

import { Component } from "@angular/core";
import { TimePicker } from "tns-core-modules/ui/time-picker";

@Component({
    selector: "time-picker",
    moduleId: module.id,
    templateUrl: "./time-picker.component.html"
})
export class HomeComponent {
    currentHour: number = new Date().getHours();
    currentMinute: number = new Date().getMinutes();
    timePicker: TimePicker;

    onTimePickerLoaded(args) {
        this.timePicker = args.object as TimePicker;
    }

    onSubmit(): void {
        console.log("Submit was pressed");

        console.log(this.timePicker.time);
        console.log(this.timePicker.hour);
        console.log(this.timePicker.minute);
    }
}

Playground demo for the above scenario.

Another possibility is to get the reference via getViewById and with Page DI.

Example for using Page dependency injection.

time-picker.component.html

<StackLayout class="home-panel">
    <TimePicker #tp id="my-time-picker" (loaded)="onTimePickerLoaded($event)" 
                [hour]="currentHour" [minute]="currentMinute" 
                verticalAlignment="center"></TimePicker>
    <Button text="Submit" (tap)="onSubmit()"></Button>
</StackLayout>

time-picker.component.ts

import { Component } from "@angular/core";
import { TimePicker } from "tns-core-modules/ui/time-picker";
import { Page } from "tns-core-modules/ui/page";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./time-picker.component.html",
})
export class HomeComponent {
    currentHour: number = new Date().getHours();
    currentMinute: number = new Date().getMinutes();

    timePicker: TimePicker;

    constructor(private _page: Page) { 
        this._page.on("loaded", () => { 
            this.timePicker = this._page.getViewById("my-time-picker");
        })
    }

    onSubmit(): void {
        console.log("Submit was pressed");

        console.log(this.timePicker.time);
        console.log(this.timePicker.hour);
        console.log(this.timePicker.minute);
    }
}

Playground demo for the above example