by marcelofb | v1.1.10
A nice looking modal date time picker.
npm i --save nativescript-modal-datetimepicker-fixed-color

nativescript-modal-datetimepicker Build Status npm npm

Twitter URL


This plugin is a wrapper around for Android, and UIDatePicker for iOS.

Android Screenshots

Date Picker

Time Picker



tns plugin add nativescript-modal-datetimepicker


For android, the clock style can be clock or spinner For android, the calendar style can be calendar or spinner

This can be changed in App_Resources/Android/values-21/styles.xml

<!-- Default style for DatePicker - in spinner mode -->
<style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
<item name="android:datePickerMode">calendar</item>

<!-- Default style for TimePicker - in spinner mode -->
<style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
<item name="android:timePickerMode">clock</item>


NativeScript Core

const ModalPicker = require("nativescript-modal-datetimepicker")

const picker = new ModalPicker();

// Pick Date
exports.selectDate = function() {
title: "Select Your Birthday",
theme: "light",
maxDate: new Date()
.then(result => {
// Note the month is 1-12 (unlike js which is 0-11)
"Date is: " + + "-" + result.month + "-" + result.year
var jsdate = new Date(result.year, result.month - 1,;
.catch(error => {
console.log("Error: " + error);

// Pick Time
exports.selectTime = function() {
.then(result => {
console.log("Time is: " + result.hour + ":" + result.minute);
.catch(error => {
console.log("Error: " + error);


pickDate(options): Promise<DateResponse>;

Returns a promise that resolves to DateResponse type object (Note: the month is 1-12, unlike js which is 0-11)

date: {
day: number,
month: number,
year: number

pickTime(options): Promise<TimeResponse>;

Returns a promise that resolves to TimeResponse type.

time: {
hour: number,
minute: number

options conform to the following interface:

export interface PickerOptions {
title?: string; // iOS ONLY: The title to display above the picker, default hidden.
theme?: string; // iOS ONLY: avalible options: none, extralight, light, regular, dark, extradark and prominent.
maxDate?: Date;
minDate?: Date;
startingHour?: number; // Ignored on pickDate()
startingMinute?: number; // Ignored on pickDate()
startingDate?: Date; // Ignored on pickTime()
datePickerMode?: string; // Android ONLY: set this to "spinner" to see spinner for DatePicker, other option is "calendar" (which is the default)

Response Interfaces

export interface TimeResponse {
hour: number;
minute: number;

export interface DateResponse {
day: number;
month: number;
year: number;


Apache License Version 2.0, January 2004