Customize DateTimeField in Vaadin 8

Question

In DateTimeField component, it displays both date (year, month, day) and hour (hour, minute, second). Now i don't want to get date. Any idea to only allow to show and get time ( hour:minute:second) ?

Answer 1

tl;dr

No built-in way to display time-of-day only, as of Vaadin 8.1.

You can make your own.

Details

The existing DateTimeField]() widget supports only the legacy GregorianCalendar class which is a combination of a date and a time-of-day plus a time zone. So not useful for time-of-day only values.

Unfortunately, as of Vaadin 8.1, it seems the bundled field widgets have not yet been updated for the java.time types such as the java.time.LocalTime you would want.

As a workaround for the lack of an intelligent LocalTime-savvy field, I suggest either:

• Try the date-time-fields Add-on.
  An add-on is an extension you can add to your Vaadin project, to deliver some nugget of Vaadin-related functionality. An add-on may be visual widget related, or may be non-visual backend feature. If visual such as this, you may need to do a rebuild of your project to cause the widgetset to be re-created. Perhaps a Maven clean and install (not sure as the technique for this keeps changing with various Vaadin releases).
• Make your own. Use a regular text field. Write a validator to verify user input parses as a LocalTime object. You have a choice of writing a Vaadin-specific validator or a standard Bean Validation validator. See How to add Validators in Vaadin 8?

Example

Here is some rough code for creating your own LocalTime-savvy field. This is by no means complete, but may help point you in the right direction.

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

Answer 2

In my solution I used a TextField and added a custom validator to the relevant binder:

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

I implemented the validate method as follows:

private boolean validateTime(final String timeString) {

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

Answer 3

now Vaadin 14.2.x provided new DateTimePicker component to solve this problem.

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