NativeScript Core

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

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