Angular2/NativeScript：DatePicker 根本不显示，Nativescript DatePicker 文档几乎不存在

Question

我正在忙于一个angular2/nativecript应用程序，并遇到了一些输入日期的问题...我正在尝试使用datepicker组件，但由于某种原因，我正在在日期选择器的情况下呈现任何东西应该显示在视图上。我阅读了（非常有限的）NativeScript DatePicker文档，但不幸的是，它们没有包含任何XML示例...任何想知道我的datePicker为什么不出现？我感到很困难，发现NativeScript DatePicker页面上的信息很少...

很奇怪。

我的视图代码：

<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

我已经在我的nativescript angular2应用程序中实现了生日选择器。我不确定它是否会帮助您解决问题，但是您可以转介我的代码。

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;
    }
 }

Answer 2

基于文档中的此示例，您可以使用nativecript加载事件并设置datepicker属性，例如此

html文件

<DatePicker #datePicker (loaded)="configure(datePicker)"></DatePicker>

ts文件

export class ConfigureDatePickerComponent {
    configure(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);
    }
}

可以在此POC应用程序中找到工作日期挑选和列表选项的完整示例。