Angular2/NativeScript: DatePicker doesn't display at all and Nativescript DatePicker documentation almost non existent

Question

I am busy with an Angular2/Nativescript app and running into some issues inputting a date... I am trying to use the DatePicker component but for some reason nothing gets rendered where the Date Picker is supposed to be displayed on the view. I read through the (VERY LIMITED) Nativescript DatePicker documentation but unfortunately they didn't include any xml example... Any idea why my DatePicker isn't showing up? i feel quite stuck and find it very strange that there's so little info on the Nativescript DatePicker page...

my view code:

<StackLayout class="page">
<StackLayout *ngIf="!invoiceInProgress && !captureInProgress">
    <StackLayout class="form">
        <stackLayout class="input-field">
            <TextField class="input input-border" hint="Enter Order Number" [(ngModel)]="orderNumber"></TextField>
        </stackLayout>
        <Button class="btn btn-primary" text="Verify Order Number" (tap)="verifyOrderNumber()" [isEnabled]="orderNumber !== '' && orderNumber != null"></Button>
    </StackLayout>
</StackLayout>

<StackLayout *ngIf="invoiceInProgress">
<Label class="h1 title m-x-auto" text="Invoice details"></Label>
<StackLayout class="form">
    <StackLayout class="input-field">
        <TextField class="input input-border" hint="Enter Invoice Number"></TextField>      
    </StackLayout>
</StackLayout>
    <DatePicker #invoiceDatePicker [(ngModel)]="invoiceDate"></DatePicker>
</StackLayout>

</StackLayout>

and in my controller:

invoiceDate: Date = new Date("2017/01/01");

Answer 1

I have implemented the Birthdate selector in My Nativescript Angular2 App. I'm not sure if it will help you to solve your issue, But you can refer my code.

HTML

<TextView class="input"  id="birthday" [(ngModel)]="userDetail.birthday" hint="Enter date" [text]="birthDate | amDateFormat:'LL'" (tap)="showDatePicker()" returnKeyType="done" (returnPress)="submit()" row="0" col="1" style.horizontalAlignment="left" width="70%"   marginLeft="-5"></TextView>

TS

export class EditProfileComponent{

 public birthDate;


    ngOnInit() {
    let datePicker = this.page.getViewById<DatePicker>("datePicker");
        datePicker.year = 1980;
        datePicker.month = 2;
        datePicker.day = 9;
        datePicker.minDate = new Date(1975, 0, 29);
        datePicker.maxDate = new Date(2045, 4, 12);
    }


    enterDate() {
        let datePicker = this.page.getViewById<DatePicker>("datePicker");
        let selectedDate = new Date(datePicker.year, datePicker.month - 1, datePicker.day);
        this.birthDate  = selectedDate;
        this.isButtonVisible = false;
        this.isItemVisible = false;
    }

    showDatePicker() {
        let textFielsBDate = this.page.getViewById<TextView>("birthday");
        this.isButtonVisible = true;
        this.isItemVisible = true;
    }
 }