Date Picker
DatePicker
control 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.
Usage
Using DatePicker
is as straightforward as setting
year
, month
, and day
.
Alternatively, you can set the date
property
(accepts a Date
object). If required you can also
set minDate
and maxDate
.
<DatePicker year="1980" month="4" day="20" loaded="onDatePickerLoaded" date="{{ date }}" minDate="{{ minDate }}" maxDate="{{ maxDate }}"></DatePicker>
function onNavigatingTo(args) {
const page = args.object;
const vm = new Observable();
// in the following example the DatePicker properties are binded via Observableproperties
const TODAY = new Date();
vm.set("date", TODAY); // the binded date property accepts Date object
vm.set("minDate", new Date(1975, 0, 29)); // the binded minDate property accepts Date object
vm.set("maxDate", new Date(2045, 4, 12)); // the binded maxDate property accepts Date object
page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
function onDatePickerLoaded(args) {
const datePicker = args.object;
datePicker.on("dateChange", (args) => {
console.dir(args);
});
datePicker.on("dayChange", (args) => {
console.dir(args);
});
datePicker.on("monthChange", (args) => {
console.dir(args);
});
datePicker.on("yearChange", (args) => {
console.dir(args);
});
}
exports.onDatePickerLoaded = onDatePickerLoaded;
import { EventData, Observable } from "tns-core-modules/data/observable";
import { DatePicker } from "tns-core-modules/ui/date-picker";
import { Page } from "tns-core-modules/ui/page";
export function onNavigatingTo(args: EventData) {
const page = <Page>args.object;
const vm = new Observable();
// in the following example the DatePicker properties are binded via Observableproperties
vm.set("minDate", new Date(1975, 0, 29)); // the binded minDate property accepts Date object
vm.set("maxDate", new Date(2045, 4, 12)); // the binded maxDate property accepts Date object
page.bindingContext = vm;
}
export function onDatePickerLoaded(data: EventData) {
const datePicker = <DatePicker>data.object;
datePicker.on("dateChange", (args) => {
console.dir(args);
});
datePicker.on("dayChange", (args) => {
console.dir(args);
});
datePicker.on("monthChange", (args) => {
console.dir(args);
});
datePicker.on("yearChange", (args) => {
console.dir(args);
});
}
Styling
There are some limitations when styling
DatePicker
component, caused by the way the
different native controls works on Android and on iOS. One major
difference is that on Android we can control the font color by
modifying the colors.xml
file in
App_Resources/Android/values/colors.xml
while on
iOS we can directly use the CSS property color
.
.date-picker {
background-color: olivedrab;
border-color: burlywood;
border-width: 2;
border-radius: 10;
color: whitesmoke;
vertical-align: middle;
}
Android specifics: On Android API21+ we can also change our
DatePicker
from the defaultspinner
mode tocalendar
mode and also change the default background and color using the project'sapp/App_Resources/Android/values-v21/colors.xml
color settings. To achieve that, go toapp/App_Resources/Android/values-v21/styles.xml
and modify theDatePicker
default style.<!-- DatePicker in calendar mode --> <style name="AppTheme" parent="AppThemeBase"> <item name="android:datePickerStyle">@style/CalendarDatePicker</item> </style> <style name="CalendarDatePicker" parent="android:Widget.Material.Light.DatePicker"> <item name="android:datePickerMode">calendar</item> <item name="colorPrimary">@color/ns_blue</item> <item name="colorPrimaryDark">@color/ns_primaryDark</item> <item name="colorAccent">@color/ns_accent</item> </style>
Tips And Tricks
Creating DatePicker via Code-Behind
Using a DatePicker
in code-behind files requires
the tns-core-modules/ui/date-picker
module.
const DatePicker = require("tns-core-modules/ui/date-picker").DatePicker;
import { DatePicker } from "tns-core-modules/ui/date-picker";
Creating and controlling
DatePicker
programmatically.
const datePicker = new DatePicker();
datePicker.day = 20;
datePicker.month = 4;
datePicker.year = 1980;
// datePicker.date = new Date(1980, 4, 20);
datePicker.minDate = new Date(1970, 12, 31);
datePicker.maxDate = new Date(2040, 4, 20);
const datePicker = new DatePicker();
datePicker.day = 20;
datePicker.month = 4;
datePicker.year = 1980;
// datePicker.date = new Date(1980, 4, 20); // using Date object
datePicker.minDate = new Date(1970, 12, 31);
datePicker.maxDate = new Date(2040, 4, 20);
Properties
Name | Type | Description |
---|---|---|
date |
Date |
Gets or sets the entire date as Date object.
|
minDate |
Date |
Gets or sets the min date |
maxDate |
Date |
Gets or sets the max date |
day |
number |
Gets or sets the day. The days start from 1. |
month |
number |
Gets or sets the month. The months start from 1. |
year |
number |
Gets or sets the year. |
Events
Name | Description |
---|---|
dateChange |
Emitted when the date property is changed.
|
dayChange |
Emitted when the day property is changed.
|
monthChange |
Emitted when the month property is changed.
|
yearChange |
Emitted when the year property is changed.
|
API References
Name | Type |
---|---|
tns-core-modules/ui/date-picker | Module |
DatePicker | Class |
Native Component
Android | iOS |
---|---|
android.widget.DatePicker | UIDatePicker |