dateTimePicker 日期时间
dateTimePicker 支持用户输入或选择日期和时间。
XML 元素 |
|
|---|---|
Java 类 |
|
基本用法
日期和时间可以直接通过键盘输入，或者在弹窗中选择。当有任何输入或点击控件时，会显示选择弹窗。
下面的示例定义了带标签的 dateTimePicker：
<dateTimePicker id="dateTimePicker" label="DateTimePicker" datatype="localDateTime"/>数据感知的 dateTimePicker
使用 dataContainer 和 property 属性将 dateTimePicker 与一个实体属性绑定。数据容器提供实体实例，property 表示需要使用该组件编辑的属性。
下面的示例生成了一个数据感知的 dateTimePicker：
<data>
<instance id="taskDc"
class="io.jmix.uisamples.entity.Task"
fetchPlan="_local"/>
</data>
<layout>
<dateTimePicker id="dateTimePicker" label="DateTimePicker"
dataContainer="taskDc" property="dueDate"/>
<hbox>
<span text="Value in the container:"/>
<span id="spanValue"/>
</hbox>
</layout>间隔
选择弹窗中显示时间的默认间隔为 1 小时。但是也可以使用 step 属性自定义间隔，支持 XML 和编程式设置。step 属性支持通过不同的时间（chrono）单位设置灵活的间隔。时间值支持通过单位后缀实现便捷设置。
在视图 XML 中设置 step：
<dateTimePicker step="2h"/> (1)
<dateTimePicker step="1600s"/> (2)
<dateTimePicker step="20m"/> (3)
<dateTimePicker step="30"/> (4)| 1 | 2 小时间隔。 |
| 2 | 1600 秒（26 分 40 秒）间隔。 |
| 3 | 20 分钟间隔。 |
| 4 | 不带后缀表示按“分钟”。 |
视图控制器中也可以设置：
@ViewComponent
private TypedDateTimePicker dateTimePicker;
@Subscribe
public void onInit(final InitEvent event) {
dateTimePicker.setStep(Duration.ofMinutes(30));
}设置的时间间隔必须能整除一小时或一天。例如，“15分钟”、“30分钟”、“2小时” 都是有效的间隔；而 “42分钟” 则不是。
| 弹窗不会显示小于 15 分钟的间隔，是为了避免无效的时间选取。 |
日期格式
应用程序中的默认时间日期格式是由 本地格式字符串 定义。如需使用不同格式，请在消息包添加自定义格式字符串。
如需为特定组件修改日期格式，可以使用 dateFormat 属性设置所需的格式。
日期时间范围
<dateTimePicker min="2024-01-01T10:30:00" max="2024-12-31T20:30:00"/>或者在视图控制器中设置动态日期：
@ViewComponent
protected TypedDateTimePicker<LocalDateTime> dateTimePicker;
@Subscribe
protected void onInit(InitEvent event) {
dateTimePicker.setMin(LocalDateTime.now().minusWeeks(1));
dateTimePicker.setMax(LocalDateTime.now().plusWeeks(1));
}验证
如需检查 dateTimePicker 组件输入的值，可以添加一个 validator元素。其中可以添加自定义的验证规则或使用下列预定义的验证器：
下面的示例中，展示了如何使用 FutureValidator 确保选择的是一个未来的日期：
<dateTimePicker label="Select a future date and time">
<validators>
<future/>
</validators>
</dateTimePicker>样式版本
使用 themeNames 属性配置一个或多个样式。
| 样式 | 描述 | 支持的主题 |
|---|---|---|
|
组件尺寸较小 |
Aura, Lumo |
|
字段值左对齐 |
Aura, Lumo |
|
字段值居中 |
Aura, Lumo |
|
字段值右对齐 |
Aura, Lumo |
|
帮助文字显示在字段上方，标题下方。 |
Aura, Lumo |
XML 属性
下面是 dateTimePicker 的特殊属性：
| 名称 | 描述 | 默认值 |
|---|---|---|
是否在用户输入日期时自动打开日历。 |
— |
|
设置日期字段中的占位符。 |
— |
|
设置可以选择的最大日期和时间。 |
— |
|
设置可以选择的最小日期和时间。 |
— |
|
设置时间字段中的占位符。 |
— |
下面是 dateTimePicker 支持的其他通用属性：
id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - dataContainer - datatype - dateFormat - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - required - requiredMessage - step - tabIndex - themeNames - visible - weekNumbersVisible - width
事件和处理器
下面是 dateTimePicker 的特殊事件和处理器：
| 名称 | 描述 |
|---|---|
当客户端验证修改了组件的有效性时发送。 |
|
验证组件的值。 |
下面是 dateTimePicker 支持的其他通用事件：