在 GitHub 上查看

@nativescript/datetimepicker ​

一个提供 UI 元素 DatePickerField、TimePickerField 和 DateTimePickerFields 用于选择日期和时间的插件。DatePickerField 和 TimePickerField 组件扩展了 TextField 视图，而 DateTimePickerFields 扩展了 GridLayout 布局容器，该容器包含 DatePickerField 和 TimePickerField 组件的实例。还有一个 DateTimePicker 类，它提供了静态方法 pickDate() 和 pickTime()，可以调用它们来显示与字段相同的对话框选择器。

目录 ​

• @nativescript/datetimepicker
  • 目录
  • 安装
  • 使用 @nativescript/datetimepicker
    • 核心
    • Angular
    • Vue
    • Svelte
    • 设置选定的日期和时间
    • 更改选择器标题和按钮标签
    • 设置本地化
    • 格式化日期和时间
    • 设置最小日期和最大日期
    • 设置 DateTimePickerFields 选择器的布局
    • 使用 CSS 样式化选择器
    • 手动创建自定义选择器
  • API
    • DatePickerField
    • TimePickerField
    • DateTimePickerFields
    • DateTimePicker 类
    • DatePickerOptions
    • TimePickerOptions
    • DateTimePickerStyle
  • 许可证

安装 ​

npm install @nativescript/datetimepicker

使用 @nativescript/datetimepicker ​

核心 ​

1. 使用 Page 的 xmlns 属性注册插件命名空间，提供您的前缀（例如 datetime），并将它的值设置为插件名称。

   xml

   <Page
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:datetime="@nativescript/datetimepicker"
   ></Page>

2. 通过前缀访问 datePickerField 视图。

   xml

   <Page
     xmlns="http://schemas.nativescript.org/tns.xsd"
     xmlns:datetime="@nativescript/datetimepicker"
   >
     <datetime:DatePickerField hint="select date"></datetime:DatePickerField>
     <datetime:TimePickerField hint="select time"></datetime:TimePickerField>
     <datetime:DateTimePickerFields
       hintDate="select date"
       hintTime="select time"
     ></datetime:DateTimePickerFields>
   </Page>

Angular ​

1. 通过将插件的 NativeScriptDateTimePickerModule 添加到包含要使用 DatePickerField 的组件的模块的 imports 数组中来注册插件。

   ts

   import { NativeScriptDateTimePickerModule } from '@nativescript/datetimepicker/angular'
   
   @NgModule({
     imports: [
       NativeScriptCommonModule,
       NativeScriptDateTimePickerModule,
       // ...
     ],
     // ...
   })

2. 在标记中按如下方式使用 DatePickerField

   xml

   <DatePickerField hint="select date"></DatePickerField>
   <TimePickerField hint="select time"></TimePickerField>
   <DateTimePickerFields
     hintDate="select date"
     hintTime="select time"
   ></DateTimePickerFields>

Vue ​

1. 安装插件后，在 main.ts 文件中将其注册到您的应用项目，以实现全局访问。

   ts

   import DateTimePicker from '@nativescript/datetimepicker/vue'
   
   import Home from './components/Home.vue'
   
   const app = createApp(Home).use(DateTimePicker)
   
   app.start()

2. 在 template 中按如下方式使用 DatePickerField

   xml

   <DatePickerField hint="select date" />
   <TimePickerField hint="select time" />
   <DateTimePickerFields hintDate="select date" hintTime="select time" />

Svelte ​

安装插件后，在 app.ts 文件中将 DateTimePickerFields 注册到您的应用。

registerNativeViewElement(
  'dateTimePickerFields',
  () => require('@nativescript/datetimepicker').DateTimePickerFields
)

接下来，通过添加 dateTimePickerFields 元素，在标记中使用选择器。

<dateTimePickerFields hintDate="pick a date" hintTime="pick time"></dateTimePicker>

设置选定的日期和时间 ​

要设置 TimePickerField 的选定时间，请使用 time 属性。

<TimePickerField time="01:00"></TimePickerField>

DatePickerField 和 DateTimePickerFields 组件都使用 date 属性来设置它们的选定日期（以及 DateTimePickerFields 的时间）值。

<DatePickerField date="2019/02/24"></DatePickerField>

<DateTimePickerFields date="2019/02/24 01:00"></DateTimePickerFields>

更改选择器标题和按钮标签 ​

要更改选择器弹出窗口的标题和按钮标签，请使用 pickerOkText、pickerCancelText 和 pickerTitle 属性。

<DatePickerField
  hint="tap to choose"
  pickerOkText="Approve"
  pickerCancelText="Reject"
  pickerTitle="Confirm predefined date selection"
  pickerDefaultDate="2019/05/15"
></DatePickerField>

DateTimePickerFields 还有 pickerTitleDate 用于日期选择器标题，以及 pickerTitleTime 用于时间选择器标题。

<DateTimePickerFields
  hintDate="tap to choose date"
  hintTime="tap to choose time"
  pickerOkText="Approve"
  pickerCancelText="Reject"
  pickerTitleDate="Confirm predefined date selection"
  pickerTitleTime="Confirm predefined time selection"
  pickerDefaultDate="2019/05/15 22:00"
  autoPickTime="true"
></DateTimePickerFields>

设置本地化 ​

要本地化 DatePickerField 和 DateTimePickerFields 组件，请使用 locale 属性。

<DatePickerField locale="en_GB" hint="select date"></DatePickerField>
<!-- DateTimePickerFields -->
<DateTimePickerFields
  locale="de_DE"
  hintDate="datum auswählen"
  hintTime="zeit wählen"
  pickerOkText="Bestätigen"
  pickerCancelText="Stornieren"
  pickerTitleDate="Datum auswählen"
  pickerTitleTime="Zeit wählen"
></DateTimePickerFields>

格式化日期和时间 ​

除了取决于 locale 属性值的默认格式之外，您还可以添加自定义格式，其中可以包含日期/时间值的排序以及自定义文本。要自定义日期格式，请使用 dateFormat 属性。

<DatePickerField
  date="2019/02/24"
  dateFormat="'my date': dd-MMMM-yyyy"
></DatePickerField>

TimePickerField 将根据 iOS 设备设置中的选定区域以及 Android 设备的“使用 24 小时制”设置来确定使用 12 小时制还是 24 小时制（用于格式化字段中选定的时间以及小时微调器的值）。要更改 Android 上的默认设置，您需要使用 timeFormat 属性，要更改 iOS 上的设置，您需要使用 locale 属性。

<TimePickerField
  time="16:00"
  timeFormat="h:mm a"
  locale="en_US"
></TimePickerField>

对于 DateTimePickerFields 选择器，使用相同的属性（dateFormat、timeFormat 和 locale）来进行自定义日期和时间格式。

<DateTimePickerFields
  date="2019/02/24 16:00"
  timeFormat="h:mm a"
  locale="en_US"
></DateTimePickerFields>

设置最小日期和最大日期 ​

要设置最小日期和最大日期，请对 DatePickerField 和 DateTimePickerFields 组件使用 minDate 和 maxDate 属性。

<DatePickerField
  minDate="2020/02/02"
  maxDate="2021/02/02"
  hint="tap to select"
></DatePickerField>
<!-- DateTimePickerFields -->
<DateTimePickerFields
  minDate="2020/02/02"
  maxDate="2021/02/02"
  hintDate="tap to select date"
  hintTime="tap to select time"
></DateTimePickerFields>

设置 DateTimePickerFields 选择器的布局 ​

要将选择器字段水平（默认）或垂直排列，请使用 orientation 属性。

<DateTimePickerFields
  hintDate="select date"
  hintTime="select time"
  orientation="vertical"
></DateTimePickerFields>

使用 CSS 样式化选择器 ​

您可以使用 CSS 来样式化 DatePickerField 和 TimePickerField 选择器。相同的样式适用于 DateTimePickerFields 组件中包含的选择器。选择器支持通过以下预定义的 CSS 类更改其颜色

• date-time-picker：选择器背景和标题文本颜色)
• date-time-picker-spinners：日期/时间选择微调器的背景和文本颜色
• date-time-picker-buttons：确定/取消按钮的背景和文本颜色
• date-time-picker-button-ok 和 date-time-picker-button-cancel：为每个按钮提供单独的样式。

timepickerfield,
datepickerfield {
  padding: 12 4;
}

timepickerfield.apply-css,
datepickerfield.apply-css {
  color: #cddc39;
  background-color: #00796b;
  font-size: 20;
  font-weight: bold;
  padding: 20;
}

.date-time-picker.apply-css {
  color: #00796b;
  background-color: #cddc39;
}

.date-time-picker-spinners.apply-css {
  color: #cddc39;
  background-color: #00796b;
}

.date-time-picker-buttons.apply-css {
  color: #00796b;
}

要在打开 DateTimePicker 时在运行时应用样式，您可以执行以下操作

import {
  DateTimePicker,
  DateTimePickerStyle,
} from '@nativescript/datetimepicker'
import { Application, View } from '@nativescript/core'

function createPicker(args: EventData) {
  const dateTimePickerStyle = DateTimePickerStyle.create(args.object as any)

  // This example handles styling the calendar for light and dark mode of the device settings
  if (Application.systemAppearance() === 'dark') {
    // style for dark mode
    dateTimePickerStyle.buttonsBackgroundColor = new Color('#202125')
    dateTimePickerStyle.dialogBackgroundColor = new Color('#202125')
    dateTimePickerStyle.titleTextColor = new Color('#fff')
    dateTimePickerStyle.buttonsTextColor = new Color('#0067a6')
    dateTimePickerStyle.spinnersBackgroundColor = new Color('#202125')
    dateTimePickerStyle.spinnersTextColor = new Color('#fff')
  } else {
    // style for light mode
    dateTimePickerStyle.buttonsBackgroundColor = new Color('#fff')
    dateTimePickerStyle.dialogBackgroundColor = new Color('#fff')
    dateTimePickerStyle.titleTextColor = new Color('#0067a6')
    dateTimePickerStyle.buttonsTextColor = new Color('#0067a6')
    dateTimePickerStyle.spinnersBackgroundColor = new Color('#fff')
    dateTimePickerStyle.spinnersTextColor = new Color('#0067a6')
  }

  DateTimePicker.pickDate(
    {
      context: (args.object as View)._context,
      minDate: new Date((new Date() as any) - 1),
      title: 'DatePicker',
      okButtonText: 'Okay',
      cancelButtonText: 'Cancel',
      locale: 'es',
    },
    dateTimePickerStyle
  ).then((result) => {
    // handle the result
  })
}

手动创建自定义选择器 ​

在内部，DatePickerField 和 TimePickerField 调用 DateTimePicker 类的 pickDate 和 pickTime 方法，它们是公开的。您可以通过手动调用这些方法来创建自定义选择器。pickDate 方法接受 DatePickerOptions，而 pickTime 方法接受 TimePickerOptions。

function onPickDateTap(args: EventData) {
  const dateToday = new Date()
  const dateTomorrow = new Date(
    dateToday.getFullYear(),
    dateToday.getMonth(),
    dateToday.getDate() + 1
  )
  const dateNextWeek = new Date(
    dateToday.getFullYear(),
    dateToday.getMonth(),
    dateToday.getDate() + 7
  )

  DateTimePicker.pickDate({
    context: args.object._context,
    date: dateTomorrow,
    minDate: dateTomorrow,
    maxDate: dateNextWeek,
    okButtonText: 'OK',
    cancelButtonText: 'Cancel',
    title: 'choose date',
    locale: 'en_GB',
  }).then((selectedDate) => {
    if (selectedDate) {
      this.dateText = this.getFormattedDate(selectedDate)
    }
  })
}

function onPickTimeTap(args: EventData) {
  const dateToday = new Date()
  const dateTomorrow = new Date(
    dateToday.getFullYear(),
    dateToday.getMonth(),
    dateToday.getDate() + 1
  )
  dateTomorrow.setHours(8)
  dateTomorrow.setMinutes(0)
  DateTimePicker.pickTime({
    context: args.object._context,
    time: dateTomorrow,
    okButtonText: 'OK',
    cancelButtonText: 'Cancel',
    title: 'choose time',
    locale: 'en_GB',
    is24Hours: true,
  }).then((selectedTime) => {
    if (selectedTime) {
      this.timeText = this.getFormattedTime(selectedTime)
    }
  })
}

API ​

DatePickerField ​

TimePickerField ​

DateTimePickerFields ​

DateTimePicker Class ​

DatePickerOptions ​

TimePickerOptions ​

DateTimePickerStyle ​

License ​

Apache License Version 2.0