DateTimeComboPicker - Vaadin Add-on Directory
A combined date & time picker with a single field, a single popup, and a LocalDateTime value.**DateTimeComboPicker** is what DateTimePicker would be with one field instead of two:
a single input with a `LocalDateTime` value and a single popup containing a month
calendar and sliding time columns side by side.
**The format pattern drives the UI.** One pattern (a `java.time`-style subset)
controls how the value is displayed and parsed in the field *and* which controls
the popup offers — no `ss` in the pattern means no seconds column, `h`/`hh`
switches to a 12-hour clock with an AM/PM column, a date-only pattern behaves
like a plain date picker, a time-only pattern shows only the time columns.
```java
DateTimeComboPicker picker = new DateTimeComboPicker("Meeting");
picker.setFormat("dd.MM.yyyy HH:mm:ss"); // seconds column appears automatically
picker.setValue(LocalDateTime.now());
picker.addValueChangeListener(e -> System.out.println(e.getValue()));
```
**Features**
- Standard Vaadin field — HasValue<..., LocalDateTime>, so Binder works
out of the box; label, helper, placeholder, tooltip, error message, required
indicator, read-only, clear button, auto-open.
- Validation — client-side on commit and server-side on every value change;
min/max, disabled dates, and per-constraint error messages
(badInput/required/min/max/dateDisabled).
- Time columns or analog clock — free-scrolling digital columns by default,
or a Material-style analog dial (setTimeView(TimeView.CLOCK)) with automatic
hour → minute advancement.
- Mobile-ready — below 450 px the popup becomes a fullscreen bottom sheet
with Date/Time tabs.
- Configurable selection — hour/minute/second steps, initial position,
instant apply or staged OK/Cancel with a customizable action bar
(addToActionBar(...)).
- Keyboard support — full calendar navigation (arrows, PageUp/PageDown,
Home/End), column and clock-dial keyboard control, Escape to close.
- I18n — month/weekday names, first day of week, AM/PM strings (used in the
popup and for field parsing), button labels, week numbers.
- Lumo native — built from the same public Vaadin mixins as the core pickers
(@vaadin/overlay, @vaadin/field-base), so it inherits your theme without
extra styling.
The month calendar is forked from @vaadin/date-picker (Apache 2.0) rather than
imported from its private internals, so Vaadin minor updates cannot break it. The
jar bundles the compiled web component — no extra npm dependencies to manage. The
component is also usable outside Flow as a standalone web component:
date-time-combo-picker on npm.
Requires Vaadin 24.4+ and Java 17. Apache 2.0 licensed.
Full documentation, including the format-pattern reference, all options with
examples, i18n and styling parts:
[Guide](https://github.com/krissvaa/datetimecombopicker/blob/main/docs/guide.md)
View on GitHub