【问题标题】：Customize DateTimeField in Vaadin 8在 Vaadin 8 中自定义 DateTimeField
【发布时间】：2017-10-15 07:28:17
【问题描述】：

在 DateTimeField 组件中，它同时显示日期（年、月、日）和小时（小时、分钟、秒）。现在我不想约会。任何想法只允许显示和获取时间（小时：分钟：秒）？

【问题讨论】：

标签： vaadin8

【解决方案1】：

tl;博士

从 Vaadin 8.1 开始，没有内置方式仅显示时间。

你可以自己做。

详情

现有的DateTimeField]() 小部件仅支持旧的GregorianCalendar 类，它是日期和时间的组合加上时区。因此，仅对时间值没有用处。

不幸的是，从 Vaadin 8.1 开始，捆绑的字段小部件似乎尚未针对您想要的 java.time.LocalTime 等 java.time 类型进行更新。

作为缺少智能LocalTime-savvy 字段的解决方法，我建议：

试试date-time-fields Add-on。
插件是您可以添加到您的 Vaadin 项目的扩展，以提供一些与 Vaadin 相关的功能。附加组件可能与可视小部件相关，也可能是非可视后端功能。如果是这样的可视化，您可能需要重新构建项目以重新创建小部件集。可能是一个 Maven clean 和 install（不确定这种技术会随着各种 Vaadin 版本不断变化）。
自己制作。使用常规文本字段。编写一个验证器来验证用户输入 parses 作为 LocalTime 对象。您可以选择编写特定于 Vaadin 的验证器或标准的 Bean Validation 验证器。见How to add Validators in Vaadin 8？

示例

这里是一些用于创建您自己的LocalTime-savvy 字段的粗略代码。这绝不是完整的，但可能会帮助您指出正确的方向。

final Label whenLabel = new Label( "when?" );
final TextField whenField = new TextField( );
whenField.setCaption( "When:" );
whenField.setValueChangeMode( ValueChangeMode.BLUR );
whenField.addValueChangeListener( new HasValue.ValueChangeListener < String >( )
{
    static final long serialVersionUID = 201710132100L;

    @Override
    public void valueChange ( HasValue.ValueChangeEvent < String > valueChangeEvent )
    {
        String input = whenField.getValue( );
        System.out.println( "input: " + input );
        try
        {
            // DateTimeFormatter f = DateTimeFormatter.ISO_LOCAL_TIME; // Constant ISO_LOCAL_TIME is for time-of-day in standard ISO 8601 format.
            // DateTimeFormatter f = DateTimeFormatter.ofLocalizedTime( FormatStyle.SHORT ).withLocale( Locale.CANADA_FRENCH ); // Automatically localize.
            DateTimeFormatter f = DateTimeFormatter.ofLocalizedTime( FormatStyle.SHORT ).withLocale( Locale.US ); // Automatically localize.
            LocalTime localTime = LocalTime.parse( input , f );
            String timeIso8601 = localTime.toString( );
            whenLabel.setValue( timeIso8601 );
        } catch ( DateTimeParseException e )
        {
            whenLabel.setValue( e.getClass().getCanonicalName() );
            System.out.println( "ERROR - failed to parse input: " + input );
        }
    }
} );

【讨论】：

【解决方案2】：

在我的解决方案中，我使用了一个 TextField 并向相关的活页夹添加了一个自定义验证器：

.withValidator(this::validateTime, "Invalid time")

我实现的验证方法如下：

private boolean validateTime(final String timeString) {

    try {
        LocalTime.parse(timeString);
        return true;
    } catch (final DateTimeParseException e) {
        return false;
    }
}

【讨论】：

【解决方案3】：

现在 Vaadin 14.2.x 提供了新的 DateTimePicker 组件来解决这个问题。

https://vaadin.com/releases/vaadin-14

【讨论】：