nativescript-modal-datetimepicker-ssi
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.6 • Public • Published

    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

    Install

    npm i nativescript-modal-datetimepicker-ssi

    DownloadsWeekly Downloads

    8

    Version

    1.1.6

    License

    Apache-2.0

    Unpacked Size

    41 kB

    Total Files

    15

    Last publish

    Collaborators

    • dnelson-simplec