nativescript-modal-datetimepicker

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

Android 截图

日期选择器

时间选择器

iOS

安装

NativeScript 7+

运行 ns plugin add nativescript-modal-datetimepicker

NativeScript 低于 7

运行 tns plugin add [email protected]

配置

对于 Android，时钟样式可以是 clock 或 spinner；对于 Android，日历样式可以是 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>

使用方法

NativeScript Core

const ModalPicker = require("nativescript-modal-datetimepicker")
  .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<DateResponse>;

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

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

pickTime(options): Promise<TimeResponse>;

返回一个解析为 TimeResponse 类型的 promise。

time: {
    hour: number,
    minute: number
}

close(): void;

关闭任何打开的选择器。

选项符合以下接口

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, prominent and overlay.
  overlayAlpha?: number; // iOS ONLY: when theme is 'overlay', available options: 0.0 to 1.0
  maxDate?: Date;
  minDate?: Date;
  cancelLabel?: string; // iOS Only
  doneLabel?: string; // iOS Only
  cancelLabelColor?: Color; // iOS Only
  doneLabelColor?: Color; // iOS Only
  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)
}

响应接口

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

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

许可证

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