dateTimePicker 日期时间

支持用户同时选择日期和时间。如果仅需要选择日期或时间,请使用 datePickertimePicker

  • XML 元素:dateTimePicker

  • Java 类:TypedDateTimePicker

基本用法

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

date time picker basic

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

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

数据类型

dateTimePicker 是一个带类型的组件,支持常见的日期时间数据类型:

  • date

  • dateTime

  • localDateTime

  • offsetTime

  • localTime

  • offsetDateTime

  • time

  • localDate

绑定组件 与实体属性时,会自动使用该属性的数据类型。如果需要显示设置类型,请使用 datatype 属性指定。

数据绑定

数据绑定是指将组件与数据容器进行关联。可视化组件或相应数据容器中的更改可以触发彼此的更新。有关详细信息,请参阅 使用数据组件

下面的示例生成了一个数据感知的 dateTimePicker

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

间隔

选择弹窗中显示时间的默认间隔为 1 小时。但是也可以使用 step 属性自定义间隔。支持编程式设置:

@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 分钟的间隔,是为了避免无效的时间选取。

日期格式

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

如需为特定组件修改日期格式,可以使用 dateFormat 属性设置所需的格式。

日期时间范围

如需限制特定的日期范围,可以使用 maxmin 属性指定其最大最小值:

<dateTimePicker min="2024-01-01T10:30:00" max="2024-12-31T20:30:00"/>

或者在视图控制器中设置:

@ViewComponent
private TypedDateTimePicker dateTimePicker;

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

Validation

如需检查 dateTimePicker 组件输入的值,可以添加一个 validator元素。其中可以添加自定义的验证规则或使用下列预定义的验证器:

下面的示例中,展示了如何使用 FutureValidator 确保选择的是一个未来的日期:

<dateTimePicker label="Select a future date and time">
    <validators>
        <future/>
    </validators>
</dateTimePicker>

样式版本

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

对齐

有三个选项:align-left(默认)、align-rightalign-center

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

帮助文本显示位置

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

date time picker helper text position
XML 代码
<dateTimePicker label="Date time picker label" helperText="Helper text"/>
<dateTimePicker themeNames="helper-above-field" label="Date time picker label" helperText="Helper text"/>

尺寸

有两个选项:默认大小和 small

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

XML 属性

autoOpen

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

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

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

datePlaceholder

设置日期的占位显示字符串。

max

设置可选择的最大日期时间。要求符合 ISO 格式,例如,'2023-12-31T10:00'。

min

设置可选择的最小日期时间。要求符合 ISO 格式,例如,'2023-12-24T10:00'。

timePlaceholder

设置时间的占位显示字符串。

事件和处理器

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

ClientValidatedEvent

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

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 内部元素

参考