dateTimePicker 日期时间
dateTimePicker
支持用户同时选择日期和时间。如果仅需要选择日期或时间,请使用 datePicker 或 timePicker。
-
XML 元素:
dateTimePicker
-
Java 类:
TypedDateTimePicker
基本用法
日期和时间可以直接通过键盘输入,或者在弹窗选择。当有任何输入或点击控件时,会显示选择弹窗。

下面的示例定义了带标签的 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
如果此组件不关联任何实体属性,可以用 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));
}

设置的时间间隔必须能整除一小时或一天。例如,“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
事件和处理器
AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - InvalidChangeEvent - OpenedChangeEvent - TypedValueChangeEvent - statusChangeHandler - validator
在 Jmix Studio 生成处理器桩代码时,可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加,也可以通过 Code → Generate 菜单(Alt+Insert / Cmd+N)生成。 |
InvalidChangeEvent
当组件的 invalid 属性发生变化时发送 com.vaadin.flow.component.datepicker.DatePicker.InvalidChangeEvent
。
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");
}
}
}