datePicker 日期选择
datePicker 支持用户输入日期，或者通过日历选择日期。
XML Element |
|
|---|---|
Java Class |
|
基本用法
与常规输入控件不同，datePicker 带有一个日历按钮和一个日历选择弹窗。当用户点击按钮、点击输入框或者开始输入日期时，会自动打开日历弹窗。
日历支持鼠标滚动，用户可以在右侧面板选择年份。点击底部的 Today 按钮可以直接返回今天的日期。
下面示例定义了一个带有名称的 datePicker：
<datePicker id="datePicker" label="DatePicker" datatype="localDate"/>数据感知的 datePicker
使用 dataContainer 和 property 属性将 datePicker 与一个实体属性绑定。数据容器提供实体实例，property 表示需要使用该组件编辑的属性。
下面的示例生成了一个数据感知的 datePicker：
<data>
<instance id="orderDc"
class="io.jmix.uisamples.entity.Order"
fetchPlan="_local"/>
</data>
<layout>
<datePicker id="datePicker" label="DatePicker"
dataContainer="orderDc" property="date"/>
<hbox>
<span text="Value in the container:"/>
<span id="spanValue"/>
</hbox>
</layout>日期格式
应用程序中的默认时间日期格式是由 本地格式字符串 定义。如需使用不同格式，请在消息包添加自定义格式字符串。
如需为特定组件修改格式，可以使用 dateFormat 属性。
日期范围
<datePicker id="datePicker" min="2024-01-01" max="2024-12-31"/>或者在视图控制器中设置动态日期：
@ViewComponent
protected TypedDatePicker<LocalDate> datePicker;
@Subscribe
protected void onInit(InitEvent event) {
datePicker.setMin(LocalDate.now().minusWeeks(1));
datePicker.setMax(LocalDate.now().plusWeeks(1));
}验证
如需检查组件内输入的值，请添加一个 validator 元素。支持自定义验证规则或使用以下预定义验证器：
以下示例中，使用了一个 FutureValidator 确保所选的日期是一个将来的日期：
<datePicker label="Select a future date"
datatype="date">
<validators>
<future/>
</validators>
</datePicker>样式版本
使用 themeNames 属性配置一个或多个样式。
| 样式 | 描述 | 支持的主题 |
|---|---|---|
|
组件尺寸较小 |
Aura, Lumo |
|
字段值左对齐 |
Aura, Lumo |
|
字段值居中 |
Aura, Lumo |
|
字段值右对齐 |
Aura, Lumo |
|
帮助文字显示在字段上方，标题下方。 |
Aura, Lumo |
XML 属性
下面是 datePicker 的特殊属性：
| 名称 | 描述 | 默认值 |
|---|---|---|
是否在用户输入日期时自动打开日历。 |
— |
|
设置可以选择的最大日期。 |
— |
|
设置可以选择的最小日期。 |
— |
|
设置组件的 HTML 元素名称。 |
— |
|
设置日历是否打开。 |
— |
下面是 datePicker 支持的其他通用属性：
id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - classNames - clearButtonVisible - colspan - css - dataContainer - datatype - dateFormat - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - placeholder - property - readOnly - required - requiredMessage - tabIndex - themeNames - visible - weekNumbersVisible - width
事件和处理器
下面是 datePicker 的特殊事件和处理器：
| 名称 | 描述 |
|---|---|
当客户端验证修改了组件的有效性时发送。 |
|
当组件的无效状态发生变更时发送。 |
|
当组件的日历遮罩打开或关闭时发送。 |
|
验证组件的值。 |
下面是 datePicker 支持的其他通用事件：