Vaadin 24 Datetimepicker in one field

I really don't want to write a separate custom component and lose support.

Unfortunately there is no other way at the moment. There has been some discussion within Vaadin in order to redesign this component, and there are different concepts doing this. Some are closer what you are looking for and some very much different direction. The simplest approach to make this as custom component would be to use just native input element with type attribute set to datetime-local. Something like below. And then wrap that to CustomField so that you will have similar label, tooltip, error message etc. features as other Vaadin fields. This wont be as fancy looking, and as it uses native input, the visuals will differ between browsers.

@Tag(Tag.INPUT) public class DateTimeInput extends AbstractSinglePropertyField<DateTimeInput, LocalDateTime> { private static final PropertyDescriptor<String, Optional<String>> placeholderDescriptor = PropertyDescriptors .optionalAttributeWithDefault("placeholder", ""); public DateTimeInput() { super("value", LocalDateTime.now(), String.class, value -> value.isEmpty() ? null : LocalDateTime.parse(value), value -> value.toString()); addClassName("date-time-input"); // TODO: Add your own CSS in theme getElement().setAttribute("type", "datetime-local"); setSynchronizedEvent("change"); } public void setPlaceholder(String placeholder) { set(placeholderDescriptor, placeholder); } public Optional<String> getPlaceholder() { return get(placeholderDescriptor); } public void setDisabled(boolean disabled) { this.getElement().setProperty("disabled", disabled); } public boolean isDisabled() { return getElement().getProperty("disabled", false); } @Override public void setReadOnly(boolean readOnly) { super.setReadOnly(readOnly); } @Override public boolean isReadOnly() { return super.isReadOnly(); } }