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

Question

我正忙于 Angular2/Nativescript 应用程序和运行一些输入日期的问题...我正在尝试使用 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

根据文档中的 this example，您可以使用 nativeScript 加载事件并像这样设置 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);
    }
}

可以在 this POC application 中找到工作日期选择器和列表选择器的完整示例。

Answer 2

我已经在我的 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;
    }
 }

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

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

nativescript

angular2-nativescript

angular