Question

我正在尝试使用本机脚本angular为我的移动应用添加日期选择器。我以Playground中的书本飞行示例为参考。我的页面变得模糊起来。我的日期选择器没有显示。我是本机脚本和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";

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

1 个答案: