我的日期选择器没有出现。想知道我错过了什么

Question

我正在尝试以原生脚本角度为我的移动应用添加日期选择器。我使用 Playground 中的 book flight 示例作为参考。我的页面越来越模糊。我的日期选择器没有出现。我是本机脚本和 java 脚本的新手。我包括我的代码。请让我知道我哪里出错了。

我可能遗漏了什么。

component.html

<GridLayout>
   <ScrollView>
    <GridLayout>
      <StackLayout class="form">

       -------
       ----------

       <TextField hint="Start Date" [(ngModel)]="leaveDetails.startDate" 
         (openSelectDate)="onOpenSelectDate($event)"
         [selectedDate]="selectedDate" 
         [isOnOpenStartDate]="isOnOpenStartDate"
         class="input input-border" (tap)="onOpenSelectDate(true)"> 
      </TextField>



    <TextField hint="End Date" [(ngModel)]="leaveDetails.endDate" 
        class="input input-border" (tap)="onOpenSelectDate(false)"> 
    </TextField> 

    --------
   ---------
 </GridLayout>
</ScrollView>  

<GridLayout row="0" col="0" rowSpan="4" colSpan="2" opacity="0" 
    class="overlay" id="overlayGridLayout"></GridLayout>
<GridLayout row="0" col="0" rowSpan="4" colSpan="2" rows="auto, auto, 
    auto"
    columns="*,*" verticalAlignment="center" visibility="hidden" 
    opacity="0" class="select-date" id="selectDateGridLayout">
    <Label row="0" col="0" colSpan="2" text="Select Date" class="title- 
        select-date"></Label>
    <DatePicker row="1" col="0" colSpan="2" [(ngModel)]="dateSelector"
        (dateChange)="onDateChanged($event)" verticalAlignment="center"> 
    </DatePicker>
    <Button row="2" col="0" text="Cancel" class="btn-next" 
       (tap)="onCloseSelectDate(true)"></Button>
    <Button row="2" col="1" text="OK" class="btn-previous" 
        (tap)="onCloseSelectDate(false)"></Button>
   </GridLayout>
</GridLayout>

compoment.ts

import { Page } from "tns-core-modules/ui/page";
import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
import { Visibility } from "tns-core-modules/ui/enums";


export class CreateleavesComponent {
  leaveDetails : LeaveDetails;
  public selectedDate: Date;
  public isOnOpenStartDate: boolean = false;
  public dateSelector = new Date();
  private _selectDateGridLayout: GridLayout;
  private _overlayGridLayout: GridLayout;


 constructor(private router: Router, private page: Page) {
    this.leaveDetails = new LeaveDetails();
    this.leaveDetails.startDate  = new Date();

    this.leaveDetails.endDate = new Date();
 }

 ngOnInit(): void {
   this._selectDateGridLayout = 
   this.page.getViewById('selectDateGridLayout');
   this._overlayGridLayout = this.page.getViewById('overlayGridLayout');
}



// Select Date
 onOpenSelectDate(event) {
   this.isOnOpenStartDate = event;
   if (this.isOnOpenStartDate) {
       this.dateSelector = this.leaveDetails.startDate || new Date();
   } else {
       this.dateSelector = this.leaveDetails.endDate || new Date();
   }
   this._selectDateGridLayout.visibility = <any>Visibility.visible;
   this._selectDateGridLayout.className = 'select-date';
   this._overlayGridLayout.animate({ opacity: 0.5, duration: 300 });

}

onCloseSelectDate(isCancel: boolean) {
 if (!isCancel) {
    this.selectedDate = this.dateSelector;
    if (this.isOnOpenStartDate) {
        this.leaveDetails.startDate = this.dateSelector;
    } else {
        this.leaveDetails.endDate = this.dateSelector;
    }
}

this._selectDateGridLayout.className = 'select-date';
this._overlayGridLayout.animate({ opacity: 0, duration: 300 })
    .then(() => {
        this._selectDateGridLayout.visibility = <any>Visibility.collapse;
    })
    .catch(() => {
    });
}

onDateChanged(args) {
    let date: Date = args.value;
    this.dateSelector = date;
}


}

我试图从其他问题/答案中获取指示，但我无法解决我的问题。

我希望在单击开始日期文本字段时出现日期选择器。 但是日期选择器没有出现。我在 onOpenSelectDate 函数中显示了 selectDateGridLayout，它正在从隐藏变为可见。

Answer 1

看起来您还没有在组件中导入 Datepicker。在该 component.ts 文件的顶部放置：

import { DatePicker } from "tns-core-modules/ui/date-picker";