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.

XML
JavaScript
TypeScript

<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.

<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.

Creating and controlling DatePicker programmatically.

JavaScript
TypeScript

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

NativeScript Core