Angular2/NativeScript：DatePicker的完全不和Nativescript DatePicker的文檔幾乎不存在顯示

我忙用Angular2/Nativescript應用程序，並運行了一些問題輸入一個日期...我想使用的DatePicker組件，但由於某些原因，日期選取器應該在視圖上顯示的地方沒有渲染。我通過（很有限）Nativescript DatePicker文檔閱讀，但不幸的是，他們沒有包含任何XML示例...任何想法爲什麼我的DatePicker沒有顯示出來？我覺得挺卡住，覺得很奇怪，還有的Nativescript的DatePicker頁面上那麼一點信息...Angular2/NativeScript：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");

來源

2017-02-28 user2094257

你確定正在顯示您的stacklayout？具有'* ngIf =「invoiceInProgress」' – elvismercado

是的它顯示的是...請刪除此答案。在未來，我想你應該在添加註釋部分添加問題... – user2094257

我會建議使用日期選擇器插件：https://www.npmjs.com/package/nativescript-timedatepicker –

我在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>

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

來源

2017-03-01 05:41:16 ramya0072

感謝，幫助 – user2094257

基於文檔中this example，您可以使用nativeScript裝事件和設置您的DatePicker這類似

HTML文件

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

個

TS文件可以在this POC application找到工作的日期選擇器和列表選擇器的

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

完整的例子。

來源

2017-02-28 13:13:51

我試着去開始，但沒有運氣......我只是複製/粘貼你的代碼，但仍然沒有改變。我把它放在幾個的TextField時，上面的DatePicker的文本框得到顯示，但下面的所有內容現在缺少的中間...我使用的核心黑暗的主題，如果說有什麼區別... – user2094257

Angular2/NativeScript：DatePicker的完全不和Nativescript DatePicker的文檔幾乎不存在顯示

回答

相關問題