nativescript-modal-datetimepicker-ssi
A nice looking modal date time picker.
npm i --save nativescript-modal-datetimepicker-ssi

nativescript-modal-datetimepicker-ssi Build Status npm npm

Twitter URL

NPM

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

Android Screenshots

Date Picker

Time Picker

iOS

Installation

tns plugin add nativescript-modal-datetimepicker-ssi

Configuration

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>
</style>

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

Usage

NativeScript Core


const ModalPicker = require("nativescript-modal-datetimepicker-ssi").ModalDatetimepicker;

const picker = new ModalPicker();

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

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

API

pickDate(options): Promise<{}>;

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

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

pickTime(options): Promise<{}>;

Returns a promise that resolves to time object

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, defaults to "Choose A Time" or "Choose A Date"
theme?: string, // iOS ONLY: light for a light blurry effect, dark for a dark blurry effect - defaults to dark
maxDate?: Date,
minDate?: Date,
startingHour?: number, // Ignored on pickDate()
startingMinute?: number, // Ignored on pickDate()
startingDate?: Date // Ignored on pickTime()
}

License

Apache License Version 2.0, January 2004