DatePicker inside TabView in Modalpage cannot render while open modal page in other component

nativescriptrocks

#1

I have tried to design datetime picker modal-page. I have planned to keep pickers inside Tabview in modal.

FYI,
datetimepick.html

<StackLayout class="datetimepic-commonall-stack">
<TabView selectedIndex="0" sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: 'date'}" >
 <!--<StackLayout>-->
     <DatePicker id="datePicker" ></DatePicker>
<!--</StackLayout>-->
 </StackLayout>
    <StackLayout *tabItem="{title: 'time'}">
  <!--<StackLayout>-->
<TimePicker id="timePicker" ></TimePicker>
<!--</StackLayout>-->
    </StackLayout>
</TabView>
<FlexboxLayout orientation="horizontal"> 
    <Button text="Set" (tap)="submit()"></Button>
    <Button text="Clear" (tap)="clear()"></Button>
</FlexboxLayout>
</StackLayout>

datetimepick.ts

import { Component, OnInit, NgModule } from "@angular/core";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";
import { DatePicker } from "ui/date-picker";
import { Page } from "ui/page";
import { TimePicker } from "ui/time-picker";

@Component({
    moduleId: module.id,
    templateUrl: "./datetimepic.html",
})
export class Datetimepicmodal implements OnInit {
public currentdate: Date;
public currenttime: Date;

    constructor(private params: ModalDialogParams, private page: Page) {
        this.currentdate = new Date(params.context);
        this.currenttime = new Date();
    }

    ngOnInit() {
        let datePicker: DatePicker = <DatePicker>this.page.getViewById<DatePicker>("datePicker");
        datePicker.year = this.currentdate.getFullYear();
        datePicker.month = this.currentdate.getMonth() + 1;
        datePicker.day = this.currentdate.getDate();
        datePicker.minDate = new Date(1975, 0, 29);
        datePicker.maxDate = new Date(2045, 4, 12);
       
let timePicker: TimePicker = <TimePicker>this.page.getViewById<TimePicker>("timePicker");
timePicker.hour = this.currenttime.getHours();
timePicker.minute = this.currenttime.getMinutes();
    }

    public submit() {
        let datePicker: DatePicker = <DatePicker>this.page.getViewById<DatePicker>("datePicker");
        let timePicker: TimePicker = <TimePicker>this.page.getViewById<TimePicker>("timePicker");
 
this.params.closeCallback(); 

    }

    public clear(){
        this.params.closeCallback(""); 
    }
}   

Console Error -

JS: ERROR TypeError: Cannot set property 'year' of undefined
JS: ERROR CONTEXT [object Object]

After open the modal, Its not showing the Datepicker in date tab.

But the timepicker was rendered in time tab.

Please suggest!

Thanks
.Kumaran


Date-time picker on iOS
#2

I’m also having this problem.

My thought is that since your coding a Modal Page, the ‘this.page’ is a reference to the main page, not the modal popup. Hence, you need to call getViewById on the modal page’s object. Question is: how to do that? I’m currently trying to figure this out…


#3

If you are using Angular, you may use ElementRef to easily get reference to the component. Or You may simply declare variables for minDate, maxDate etc., and bind it in HTML page.

FYI, modal window need not to be a Page, it can use any component as parent. getViewById can also be accessed from View level, refer docs for examples.


#4

Cool, you were spot on, the elementRef method worked. Thanks.

Also, I still wanted to access the modal object (out of curiosity). I finally found it by using the frame…

import { topmost } from 'tns-core-modules/ui/frame/frame';

ngOnInit() {
        let f = topmost();
        console.log(f.currentPage.modal);
        barcodeScanner = f.currentPage.modal.getViewById("barcode");
        debugger;
}