Date Picker
NativeScript provides a DatePicker control that enables the user to choose a date as a ready-to-use dialog. Every date part can be picked separately by its corresponding section of the control - for day, month and year.
Configure Date Picker
Setting its properties - year, month, day and if required - minDate and maxDate.
HTML
<DatePicker (loaded)="onPickerLoaded($event)" (dateChange)="onDateChanged($event)"
(dayChange)="onDayChanged($event)" (monthChange)="onMonthChanged($event)" (yearChange)="onYearChanged($event)" verticalAlignment="center"></DatePicker>
TypeScript
import { Component } from "@angular/core";
import { DatePicker } from "tns-core-modules/ui/date-picker";
@Component({
moduleId: module.id,
templateUrl: "./configure-date-picker.component.html"
})
export class ConfigureDatePickerComponent {
onPickerLoaded(args) {
let datePicker = <DatePicker>args.object;
datePicker.year = 1980;
datePicker.month = 2;
datePicker.day = 9;
datePicker.minDate = new Date(1975, 0, 29);
datePicker.maxDate = new Date(2045, 4, 12);
}
onDateChanged(args) {
console.log("Date New value: " + args.value);
console.log("Date value: " + args.oldValue);
}
onDayChanged(args) {
console.log("Day New value: " + args.value);
console.log("Day Old value: " + args.oldValue);
}
onMonthChanged(args) {
console.log("Month New value: " + args.value);
console.log("Month Old value: " + args.oldValue);
}
onYearChanged(args) {
console.log("Year New value: " + args.value);
console.log("Year Old value: " + args.oldValue);
}
}
API Reference for DatePicker Class
Native Component
Android | iOS |
---|---|
android.widget.DatePicker | UIDatePicker |