datePicker 日期选择
基本用法
与常规输入控件不同,datePicker
带有一个日历按钮和一个日历选择弹窗。当用户点击按钮、点击输入框或者开始输入日期时,会自动打开日历弹窗。

日历支持鼠标滚动,用户可以在右侧面板选择年份。点击底部的 Today 按钮可以直接返回今天的日期。
下面示例定义了一个带有名称的 datePicker
:
<datePicker id="datePicker" label="Select date"/>
数据类型
datePicker
是一个带类型的组件,支持常见的日期数据类型:
-
date
-
dateTime
-
localDateTime
-
offsetDateTime
-
localDate
如需修改类型,请使用 datatype 属性。
日期格式
应用程序中的默认时间日期格式是由 本地日期格式字符串 定义。如需使用不同格式,请在消息包添加自定义格式字符串。
如需为特定组件修改日期格式,可以单独设置所需的格式:
@ViewComponent
private TypedDatePicker<Comparable> datePicker;
public void onInit(final InitEvent event) {
datePicker.setLocale(Locale.US);
}
Validation
如需检查 datePicker
组件输入的值,可以通过内部元素 validators
使用 validator。
可使用下列预定义的验证器:
下面的示例中,展示了 FutureValidator
的用法:
<datePicker label="Select a future date"
datatype="date">
<validators>
<future/>
</validators>
</datePicker>
XML 属性
id - allowedCharPattern - autoOpen - classNames - clearButtonVisible - colspan - dataContainer - datatype - enabled - errorMessage - height - invalid - label - maxHeight - maxWidth - minHeight - minWidth - name - opened - 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 = "birthDatePicker", subject = "validator")
private void birthDatePickerValidator(Date date) {
Date now = timeSource.currentTimestamp();
if (date != null && DateUtils.addYears(now,-18).compareTo(date) < 0) {
throw new ValidationException("The age must be over 18 years");
}
}