@nativescript/datetimepicker

该插件提供了用于选择日期和时间的 UI 元素 DatePickerField、TimePickerField 和 DateTimePickerFields。其中，DatePickerField 和 TimePickerField 组件扩展了 TextField 视图，而 DateTimePickerFields 扩展了包含 DatePickerField 和 TimePickerField 组件实例的 GridLayout 布局容器。还有一个 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. 使用提供您的前缀（例如 datetime）和将其值设置为插件名称的方式将插件命名空间注册到页面的 xmlns 属性。

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

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

   <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 数组中来注册插件。

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

2. 如下所示在标记中使用 DatePickerField

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

Vue

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

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

2. 如下所示在模板中使用 DatePickerField

   <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 设备的 Use 24-Hour Format 设置来决定是否使用 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：为每个按钮提供不同的样式。

注意，iOS 原生实现按钮背景颜色的功能有限。当一个按钮被标记为取消按钮时，其背景总是白色且无法更改。如果您确实需要具有其他颜色的取消按钮，您可以通过指定的取消按钮类传递背景颜色，但这样将会改变选择器布局，并将取消按钮与确定按钮一起放置，它们将具有相同的背景颜色。

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 类

DatePickerOptions

TimePickerOptions

DateTimePickerStyle

许可

Apache License Version 2.0