日期/时间选择器

生成日历和输入字段以收集日期和时间数据。 支持本地化日历、中断日期和不同的显示选项。

仅在运行 Android 或 iOS 操作系统的移动设备上，“日期/时间选取器”视图才会显示操作系统 (OS) 随附的本机日期和时间选取器。 此行为意味着用户会看到不同的日期和时间选取器。 例如，在 Android 操作系统上，用户可能会使用 Google Chrome 来处理任务，因此会看到本机 Android 日期和时间选取器。 如果用户随后切换至 Apple iPhone，那么用户将看到本机 iOS 日期和时间选取器。

虽然采用 UTC 时间存储日期，但会针对用户系统的时区调整显示的日期和时间。

限制和局限性

如果用户输入日期不完整或格式无效的内容，那么当用户触发边界事件（如单击按钮）时，绑定数据项将为空。 如果流返回到页面，那么该视图为空。 绑定到相同数据项的任何其他视图也为空。

使用本机日期和时间选取器意味着部分配置属性不适用，如以下属性：

  • 周禁用日期
  • 中断日期
  • 中断日期开始日期
  • 禁用结束日期
  • 一周的开始
  • 日历类型 (选中 希伯来语 或 伊斯兰 时)
  • 日期选取器类型 (选择 内联 时)
在“表”视图内使用日期/时间选取器作为文本输入时，日期/时间选取器下拉列表将显示在表单元格中。 要将选取器显示在表上方，请选择显示弹出窗口表配置属性。 有关更多信息，请参阅 表。

数据绑定

在常规属性选项卡中设置或修改该视图的数据绑定。 数据绑定包含要显示的初始日期和时间并存储对该值的更新。 数据类型为 Date。

配置属性

在“配置”下，设置或修改视图的外观和行为属性。

屏幕大小
在属性名称旁边具有 "屏幕大小" 图标 "屏幕大小" 图标 的配置属性对于每个屏幕大小可以具有不同的值。 如果您未设置值，那么屏幕大小会继承下一个更大的屏幕大小值来作为其缺省值。
主题定义
主题定义指定视图的颜色和样式，并确定视图的外观。 您可以在主题编辑器中预览视图的外观。 请参阅 主题。
下表中显示了“日期/时间选取器”的外观配置属性：
表 1. “日期/时间选取器”的外观配置属性
外观配置属性 描述 数据类型
日期选取器类型 "屏幕大小" 图标 用于“日期时间选取器”的日历显示类型：
  • 文本输入：此日历显示具有一个文本输入框，并且最初会隐藏日历。 单击该文本框后将显示日历。
  • 内联：此日历显示具有一个内联日历，并且隐藏文本输入框。

缺省值为 文本输入。

 DatePickerType
宽度 当为日期选取器类型属性选择文本输入类型时，“日期时间选取器”的宽度。 可以 px（像素）、%（百分比）或 em 为单位来指定该宽度。 例如， 200px。 如果没有为数字值指定单位类型，那么将使用 px。 缺省情况下，没有指定宽度。 String
大小 "屏幕大小" 图标 该视图中文本的字号、标签文本的字号以及文本四周的内间距量。 例如，要使智能手机上的文本和标签更易读，可以将此配置选项设置为 Large 以补偿小屏幕大小。 TextSizeStyle
标签放置 "屏幕大小" 图标 “日期时间选取器”的标签放置位置。 LabelPlacement
标签宽度 大屏幕图标 这是标签的宽度。 您可以指定宽度，以 px（像素）、%（百分比）或 em 为单位。 例如，50px、20% 或 0.4em。 如果未指定单位类型，那么将使用 px。 String
FORMAT 用于显示和解析在文本字段中输入的文本的格式。 它接受各种日期输入，包括更接近自然语言的格式，带或不带分隔符，仅日和月，仅日等等 (MM/dd/yyyy， dd/MM/yyyy， yyyy-MM-dd， yyyy MM dd， yyyyMMdd， DD MM， DD)。
例如:
  • 如果输入 Jan 1，那么日期选取器将采用当前年份。
  • 如果您输入 17，那么它将采用当前月份和年份的 17th 个。
  • 对于输入 5/25，它假定为当前年份的月/日。
  • 对于输入 Mar 86，它假定为 1/3/1986。

此配置选项支持与 Java SimpleDate格式相同的格式，仅当浏览器没有本机日期时间选取器时才适用。		 String
一周的开始 每周的开始日期。 缺省值为 Sunday。 DatePickerWeekStart
周禁用日期 日历上禁用的一个或多个周日期。 缺省情况下，没有禁用任何周日期。 DatePickerDisabledWeekDays
显示今日按钮 显示或隐藏用于将日期设置为当日的今天按钮。 缺省情况下，不显示此按钮。 Boolean
显示清除按钮 显示或隐藏用于清除日期值的清除按钮。 缺省情况下，不显示此按钮。 Boolean
定向 单击日历时日历的方向。 DatePickerOrientation
颜色样式 “日期时间选取器”的颜色样式。 颜色与所指定主题中的变量相对应。 缺省值为缺省（深蓝色）。 DatePickerColorStyle
显示周号 "屏幕大小" 图标 对于公历日历，显示该周在一年中的编号。 例如，公历年份中的最后一周是周数52。缺省情况下，不会显示周号。 Boolean
突出显示今天 指定是否在日历中突出显示当日。 缺省情况下，不突出显示当日。 Boolean
隐藏标题 隐藏定制日期和时间选取器顶部的标题。 缺省情况下，不隐藏标题。 Boolean
显示日历图标 在文本输入框中显示日历图标。 Boolean
年份选择器样式 年份选择器的样式， 缺省值 或 现代。 tableHFStyle
下表中显示了“日期/时间选取器”的行为配置属性：
表 2. “日期/时间选取器”的行为配置属性
行为配置属性 描述 数据类型
仅限定制选取器 在移动设备上始终显示定制日期和时间选取器，而非本机日期和时间选取器。

在移动设备上，最初始终会尝试显示本机日期和时间选取器。 但是，只要指定了以下任何不受支持的配置属性，就会显示定制日期和时间选取器：

  • 周禁用日期
  • 中断日期
  • 中断日期开始日期
  • 禁用结束日期
  • 一周的开始
  • 日历类型 (选中 希伯来语 或 伊斯兰 时)
  • 日期选取器类型 (选择 内联 时)

缺省情况下，将根据适用情况来使用定制日期和时间选取器与本机日期和时间选取器。

 Boolean
包含时间选取器 使用“日期/时间选取器”视图来显示时间选取器。 缺省情况下，不显示时间选取器。 Boolean
日历类型 日历类型：
  • 格利高里历
  • 希伯来历
  • 伊斯兰历

缺省值为 Gregorian。

 CalendarType
跳进索引 跳进顺序索引。 跳进索引从 1 开始，可稀疏地进行设置。 例如，您可以使用 1、5、10。 当您通过按 Tab 键在 UI 区域之间移动时，“跳进索引”属性将控制跳进顺序。 String
占位符文本 没有输入日期时要使用的占位符文本。 通常，该文本是用户所需的输入内容的简要描述或示例。 如果绑定数据项不包含值，那么用户在字段中输入值之前，会一直看到该提示。 缺省情况下，没有指定占位符文本。 String
可用开始日期 指定可用的开始日期和时间。 将禁用指定的可用开始日期之前的所有日期。 通过外观属性中的格式属性来指定可用开始日期的格式。 缺省情况下，没有指定可用开始日期。 Date
可用结束日期 可用的结束日期和时间。 将禁用指定的可用结束日期之后的所有日期。 通过外观属性中的格式属性来指定可用结束日期的格式。 缺省情况下，没有指定可用结束日期。 Date
中断日期 要禁用的单个日期或多个非连续日期的列表。 如果提供禁用日期列表，该视图将使用定制日期和时间选取器，而非本机日期和时间选取器。 缺省情况下，没有指定禁用日期。 Date (List)
中断日期开始日期 要禁用的连续日期范围的开始日期。 缺省情况下，没有指定禁用开始日期。 Date
禁用结束日期 要禁用的连续日期范围的结束日期。 缺省情况下，没有指定禁用结束日期。 Date
初始视图 日历启动时应采用的粒度级别：
  • Month
  • Year
  • 十年

缺省值为 Month。

 DatePickerStartView
最小化视图模式 要在日历中使用的最低日期粒度级别：
  • 天数
  • 月
  • 年

缺省值为 Days。

 DatePickerMinViewMode
无自动关闭 指定在选择日期后不关闭日历。 在“日期时间选取器”失去焦点后才关闭日历。 缺省情况下，在选择日期后会自动关闭日历。 Boolean
世纪范围 当前年份之前的时间间隔，在输入两位数年份时标记 100 年范围的开始。 缺省情况下，该值设置为 50 年，这意味着日期选取器会将其映射到 50 年前开始的 100 年范围。 例如，对于 2023 年为 50 年的世纪范围，世纪范围的开始是 2023-50 = 1973，这使得 2072 成为世纪范围的结束。 Integer
禁用智能解析 禁用用户输入的文本的智能解析。 缺省情况下，已启用智能解析。 禁用智能解析时，仅接受使用指定日期/时间格式的值。 除指定格式以外的任何格式都将被声明为无效，并且将提示用户改为使用已接受的格式。 Boolean

示例

如果您想要具有可单击的日历按钮，可以在“输入组”视图内放置一个“日期/时间选取器”视图。 在“输入组”视图的属性中，将按钮类型属性设置为图标，将按钮信息属性设置为日历。 在 "输入组" 视图的 On button click 事件中，输入以下字符串:

${Control_ID}._instance.pickerControl.show();

事件

在“事件”属性中设置或修改该视图的事件处理程序。 可以将事件设置为以编程方式或在用户与该视图交互时触发。 有关如何定义和编码事件的信息，请参阅 用户定义的事件。 日期/时间选取器具有以下类型的事件处理程序:

  • On load：页面装入时激活。 例如：

    var workerStart = ${StartDate}.getDate(); me.setStart(workerStart);

  • On change: 在检测到更改时激活。 例如：

    return confirm("Are you sure you want to change date?")

  • On day cell render: 在存在日单元格呈现时激活。 在“日期时间选取器”上显示日期之前触发该事件。 例如：

    me.setDate("01/01/2015")

根据特定事件，您可以使用 JavaScript 逻辑来修改视图的效果。 可在 用户定义的事件主题中找到有关将事件与视图配合使用的更多信息。

方法

有关日期/时间选取器的可用方法的详细信息，请参阅 日期/时间选取器 JavaScript API 。

其他资源

有关如何创建 Coach 或页面的信息，请参阅 构建 Coach。
有关标准属性 (常规， 配置， 定位， 可视性和 HTML 属性) 的信息，请参阅 查看属性。