dateTimePicker 日期时间

在线示例

dateTimePicker 支持用户同时选择日期和时间。如果仅需要选择日期或时间，请使用 datePicker 或 timePicker。

  • XML 元素：dateTimePicker

  • Java 类：TypedDateTimePicker

基本用法

日期和时间可以直接通过键盘输入，或者在弹窗选择。当有任何输入或点击控件时，会显示选择弹窗。

date time picker basic

下面的示例定义了带标签的 datePicker：

<dateTimePicker id="dateTimePicker" label="Schedule meeting"/>

数据绑定

在视图 XML 中，使用 dataContainer 和 property 属性将数据与 dateTimePicker 绑定：

<dateTimePicker dataContainer="userDc"
                property="passwordExpiration"
                label="Set password expiration date"/>

在上面这个例子中，视图有 User 实体的数据容器 userDc，User 实体拥有 passwordExpiration 属性。XML 里面将 dataContainer 属性设置为这个数据容器，然后将 property 属性设置为实体字段。

数据类型

数据感知的 DateTimePicker

绑定至实体属性的 dateTimePicker 组件将使用与属性相同的数据类型。

独立的 DateTimePicker

如果此组件不关联任何实体属性，可以用 datatype XML 属性手动设置数据类型，支持下列类型：

  • date

  • dateTime

  • localDateTime

  • offsetTime

  • localTime

  • offsetDateTime

  • time

  • localDate

间隔

弹窗中显示时间的默认间隔为 1 小时。但是也可以自定义间隔。

@ViewComponent
private TypedDateTimePicker dateTimePicker;

@Subscribe
public void onInit(final InitEvent event) {
    dateTimePicker.setStep(Duration.ofMinutes(30));
}
date time picker step

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

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

日期和时间格式

应用程序中的默认时间日期格式是由 本地日期格式字符串 定义。如需使用不同格式，请在消息包添加自定义格式字符串。

如需为特定组件修改日期格式，可以单独设置所需的格式：

@ViewComponent
private TypedDateTimePicker dateTimePicker;

@Subscribe
public void onInit(final InitEvent event) {
    dateTimePicker.setLocale(Locale.UK);
}

日期范围

如需将用户的输入控制在某个特定的日期范围内，可以指定组件的最大最小值。

@ViewComponent
private TypedDateTimePicker dateTimePicker;

@Subscribe
public void onInit(final InitEvent event) {
    dateTimePicker.setMin(LocalDateTime.now());
    dateTimePicker.setMax(LocalDateTime.now().plusDays(7));
}

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

Validation

如需检查 dateTimePicker 组件输入的值，可以通过内部元素 validators 使用 validator。

可使用下列预定义的验证器：

下面的示例中，展示了 FutureValidator 的用法：

<dateTimePicker label="Select a future date"
                datatype="localDateTime">
    <validators>
        <future/>
    </validators>
</dateTimePicker>

XML 属性

id - autoOpen - classNames - clearButtonVisible - colspan - dataContainer - datatype - enabled - errorMessage - height - invalid - label - maxHeight - maxWidth - minHeight - minWidth - placeholder - property - readOnly - required - requiredIndicatorVisible - requiredMessage - tabIndex - themeNames - visible - width

autoOpen

定义当用户开始输入日期时是否显示日历弹窗。

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

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

事件和处理器

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

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

ClientValidatedEvent

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

InvalidChangeEvent

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

OpenedChangeEvent

当组件的 opened 属性发生变化时发送 OpenedChangeEvent。即，当日期面板打开或关闭时。

validator

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

@Install(to = "dateTimePickerValidation", subject = "validator")
private void dateTimePickerValidationValidator(LocalDateTime date) {
    LocalTime startTime = LocalTime.of(8,0);
    LocalTime endTime = LocalTime.of(16,0);

    if (date != null) {
        boolean isWeekday = date.getDayOfWeek().getValue() >= 1 && date.getDayOfWeek().getValue() <= 5;
        boolean isValidTime = !date.toLocalTime().isBefore(startTime) && !date.toLocalTime().isAfter(endTime);
        if (!isWeekday) {
            throw new ValidationException("Select a weekday");
        }
        if (!isValidTime) {
            throw new ValidationException("Select time from 8.00 to 16.00");
        }
    }
}

XML 内部元素

tooltip - validator

参考

Vaadin 文档