My date picker is not coming up. want to know What I have missed - datepicker

Question

I am trying to add a datepicker for my mobile app in Native script angular. I used book flight example in Playground as reference. My page is getting blured. My date picker is not coming up. I am new to native script and java script. I am including my code. Please let me know where I have gone wrong.
I may be missing something.
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;
}
}
I tried to get pointers from other question/answers but I am not able to fix my issue.
I expect the date picker to come up when I click on the start date text field.
But the datepicker is not coming up.I have displayed selectDateGridLayout in onOpenSelectDate function and it is getting changed from hidden to visible.

Answer 1

Looks like you haven't imported the Datepicker in your component. At the top of that component.ts file put:
import { DatePicker } from "tns-core-modules/ui/date-picker";