vaadin flow DateTimePicker returns null if only one field entered

Question

I'm using a DateTimePicker with vaadin flow 23.0.5.

The problem is that if a user only enters either the date or time (but not both), then when I save the field using a binder the result is a null LocalDateTime.

import com.vaadin.flow.component.datetimepicker.DateTimePicker;

private DateTimePicker noticeTwoDateTime;

noticeTwoDateTime = new DateTimePicker(label);
        layout.add(field);

binder.forField(this.noticeTwoDateTime).bind(
                NoticeTemplate::getNoticeDateTwo,
                NoticeTemplate::setNoticeDateTwo);

Is there some way to warn the user that they must enter both?

I've explored using a validator but it only gets passed the LocalDateTime which of course is null.

Answer 1

First of all you can use a helper text as described here: https://vaadin.com/docs/latest/ds/components/date-time-picker/#providing-input-guidance

And if that's not enough you can try to create your own validation routine and use it within the binder as e.g. here: https://vaadin.com/docs/latest/flow/binding-data/components-binder-validation/#defining-validators

Could look similar to this then:

myDateTimeBinding = binder.forField(myDateTimePicker)
                .withValidator(myDateTime -> Validation.validateDateTime(atdDateTimePicker.getValue()),
                        "Please pick Date and Time")
                .bind(......

with Validation as your Validation Utils Class and validateDateTime as your method returning a boolean.

Answer 2

Workaround: If you mark the field as being required/mandatory then the DateTimePicker shows an error message, if one of both is missing.

Yeah sure, you don't want mark every date/time as required....

This problem seems to have existed already in Vaadin 14: Vaadin 14 DateTimePicker with optional time or warning for missing time