Add-on Directory

DateTimeComboPicker - Vaadin Add-on Directory

A combined date & time picker with a single field, a single popup, and a LocalDateTime value. DateTimeComboPicker - Vaadin Add-on Directory
**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

DateTimeComboPicker version 1.0.1