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);
    });
}

Improve this document

Demo Source

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 default spinner mode to calendar mode and also change the default background and color using the project's app/App_Resources/Android/values-v21/colors.xml color settings. To achieve that, go to app/App_Resources/Android/values-v21/styles.xml and modify the DatePicker 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>

Improve this document

Demo Source

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

Events

API References

Native Component