原生脚本模态日期时间选择器

此插件是 Android 的 android.app.DatePickerDialog 和 iOS 的 UIDatePicker 的包装器。

Android 截图

日期选择器

时间选择器

iOS

安装

tns plugin add nativescript-modal-datetimepicker-ssi

配置

对于 Android，时钟样式可以是 clock 或 spinner，日历样式可以是 calendar 或 spinner。

这可以在 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>

使用方法

原生脚本核心

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<{}>;

返回一个解析为日期对象的 Promise（注意：月份是 1-12，与 js 中的 0-11 不同）

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

pickTime(options): Promise<{}>;

返回一个解析为时间对象的 Promise

time: {
    hour: number,
    minute: number
}

options 符合以下接口

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()
}

许可

Apache 许可证版本 2.0，2004 年 1 月