datePicker 日期选择

在线示例

datePicker 支持用户输入日期，或者通过日历选择日期。

  • XML 元素：datePicker

  • Java 类：TypedDatePicker

基本用法

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

date picker

日历支持鼠标滚动，用户可以在右侧面板选择年份。点击底部的 Today 按钮可以直接返回今天的日期。

下面示例定义了一个带有名称的 datePicker：

<datePicker id="datePicker" label="Select date"/>

数据类型

datePicker 是一个带类型的组件，支持常见的日期数据类型：

  • date

  • dateTime

  • localDateTime

  • offsetDateTime

  • localDate

如需修改类型，请使用 datatype 属性。

日期格式

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

如需为特定组件修改格式，可以使用 dateFormat 属性。

日期范围

如需限制特定的日期范围，可以使用 max 和 min 属性指定其最大最小值。也可以通过编程实现：

@ViewComponent
private TypedDatePicker<Comparable> datePicker;

@Subscribe
public void onInit(InitEvent event) {
    datePicker.setMin(LocalDate.now());
    datePicker.setMax(LocalDate.now().plusDays(7));
}

Validation

如需检查 datePicker 组件输入的值，可以通过内部元素 validators 使用 validator。

可使用下列预定义的验证器：

下面的示例中，展示了 FutureValidator 的用法：

<datePicker label="Select a future date"
            datatype="date">
    <validators>
        <future/>
    </validators>
</datePicker>

XML 属性

id - alignSelf - allowedCharPattern - autoOpen - classNames - clearButtonVisible - colspan - dataContainer - datatype - dateFormat - enabled - errorMessage - height - helperText - invalid - label - max - maxHeight - maxWidth - min - minHeight - minWidth - name - opened - placeholder - property - readOnly - required - requiredIndicatorVisible - requiredMessage - step - tabIndex - themeNames - visible - weekNumbersVisible - width

autoOpen

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

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

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

max

Vaadin

设置可选的最大日期。指定格式为 yyyy-MM-dd。

min

Vaadin

设置可选的最小日期。指定格式为 yyyy-MM-dd。

name

设置 HTML 元素的名称。

opened

设置是否打开日历选择弹窗。

事件和处理器

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - InvalidChangeEvent - OpenedChangeEvent - TypedValueChangeEvent - statusChangeHandler - validator

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

ClientValidatedEvent

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

InvalidChangeEvent

当组件的 invalid 属性发生变化时发送 com.vaadin.flow.component.datepicker.DatePicker.InvalidChangeEvent。

OpenedChangeEvent

当组件的 opened 属性发生变化时发送 OpenedChangeEvent。即，当日期打开或关闭时。

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");
        }
}

XML 内部元素

tooltip - validator

参考

Vaadin 文档