timePicker 时间选择

在线示例

timePicker 支持用户输入或选择时间。

  • XML 元素：timePicker

  • Java 类：TypedTimePicker

基本用法

时间可以直接通过键盘输入，或者在带有时间列表的弹窗选择。当点击控件或时钟按钮时，会显示弹窗。

time picker basic

下面的示例定义了带标签的 localTime 类型的 timePicker：

<timePicker id="timePicker" datatype="localTime" label="Appointment time"/>

数据类型

timePicker 是一个带类型的组件，支持通用的时间类型：

  • localTime

  • offsetTime

  • time

如需修改类型，使用 datatype 属性。

间隔

弹窗中显示时间的默认间隔为 1 小时。通过 step 属性可以自定义间隔。

在视图 XML 中设置 step 属性:

<timePicker step="30"
            min="10:00"
            max="12:00"/> (1)
1 不带 后缀 的设置表示“分钟”。
time picker step

step 属性支持通过不同的时间（chrono）单位设置灵活的间隔。时间值支持通过单位后缀实现便捷设置。

<timePicker step="2h"/> (1)
<timePicker step="1600s"/> (2)
<timePicker step="20m"/> (3)
1 2 小时间隔。
2 1600 秒（26 分 40 秒）间隔。
3 20 分钟间隔。

视图控制器中也可以设置：

@ViewComponent
private TypedTimePicker<Comparable> timePicker;

@Subscribe
public void onInit(InitEvent event) {
    timePicker.setStep(Duration.ofMinutes(30));
}

设置的时间间隔必须能整除一小时或一天。例如，“15分钟”、“30分钟”、“2小时” 都是有效的间隔；而 “42分钟” 则不是。

弹窗不会显示小于 15 分钟的间隔，是为了避免无效的时间选取。

样式版本

通过 themeNames 属性调整文本对齐方式、帮助文本显示位置以及组件的大小。

对齐

有三个选项：align-left（默认）、align-right、align-center。

time picker alignment
XML 代码 
<timePicker themeNames="align-left"/>
<timePicker themeNames="align-center"/>
<timePicker themeNames="align-right"/>

帮助文本显示位置

设置 helper-above-field 可以将帮助文本从默认的组件下方显示位置移至组件上方。

time picker helper text position
XML 代码 
<timePicker label="Appointment time:" helperText="Open 8:00 AM - 6:00 PM"/>
<timePicker themeNames="helper-above-field" label="Appointment time:" helperText="Open 8:00 AM - 6:00 PM"/>

尺寸

有两个选项：默认大小和 small。

time picker size
XML 代码 
<timePicker/>
<timePicker themeNames="small"/>

时间范围

如需将用户的输入控制在某个特定的时间范围内，使用 max 和 min 属性指定组件的最大最小值。

<timePicker min="08:00" max="18:00"/>

还可以设置 validator 检查=是否符合某个特定的=时间范围。

XML 属性

id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autoOpen - classNames - clearButtonVisible - colspan - css - dataContainer - datatype - enabled - errorMessage - focusShortcut - height - helperText - label - max - maxHeight - maxWidth - min - minHeight - minWidth - overlayClass - placeholder - property - readOnly - required - requiredMessage - step - tabIndex - themeNames - visible - width

autoOpen

定义当用户开始使用控件时是否显示弹窗。

  • 如果设置为 true，当用户输入、点击时钟按钮或控件时会打开弹窗。

  • 如果设置为 false，仅当用户点击时钟按钮时才会打开弹窗。

max

Vaadin

设置可选择的最大时间。支持格式为 hh:mm。

min

Vaadin

设置可选择的最小时间。支持格式为 hh:mm。

事件和处理器

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - InvalidChangeEvent - TypedValueChangeEvent - statusChangeHandler - validator

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

ClientValidatedEvent

ClientValidatedEvent 当在客户端完成数据验证时发送。

InvalidChangeEvent

当组件的 invalid 属性发生变化时发送 com.vaadin.flow.component.timepicker.TimePicker.InvalidChangeEvent。

validator

为组件添加 validator 实例。当值无效时，验证器需要抛出 ValidationException 异常。示例：

@Install(to = "timePicker", subject = "validator")
private void timePickerValidator(LocalTime value) {
    if (value != null && LocalTime.of(13,0).isBefore(value) && LocalTime.of(14,0).isAfter(value)) {
        throw new ValidationException("No appointments between 13:00 to 14:00.");
    }
}

XML 内部元素

tooltip - validator - prefix

参考

Vaadin 文档