Date range picker with time option in vaadin 14

Can anyone suggest selecting time along with date, not additional field to select. So I can reduce no. of fields to populate in the page and reduce no. of fields to select.


There is DateTimePicker.

The existing datetimepicker required have total 4 components to display. I have space constraint, so I want to have one component to display and when selecting want to give option to select start date and end date with time as well.

You could have a single TextField that has a pattern that restricts the input to a single date/time String to cover one datetime object of the range.

Is that possible to have date time range component on text field?
Can you pls give me any suggestion

See: Text Field | Components | Vaadin Docs you can use a pattern, and prevent invalid input. I would still probably use two TextFields (“start” and “end”), with patterns that allow inputting a date-time String. Technically you could even have single TextField like that, but it sounds really awkward.

Can’t it be given as selection option?

You probably don’t want to select a date AND a time from a single dropdown

If you want to conserve space, what if you just have a Button that opens a Dialog which has enough space to show the date and time pickers? Then you could display the result in the Button’s label.

I don’t want to have a dialogue to open. Just a ranges selection option on click of overlay

How is that different from opening a dialog?

A dialog is a generic overlay

You can open a Dialog on the click of a TextField as well, but that’s probably very unintuitive

Basically what I was implementing is to reduce the space, and no. of components to display. So that separate date and time selection can be avoided when using rage selection

So could you not save space by placing the components in a Dialog which opens from a single Button? This will also reduce the total number of components, as the controls will be reused every time the Dialog is opened.

Yes. I understand and want to follow the same mechanism. But I am thinking how to implement on a click of a text field. Since I dont find any listeners on click for text field

Can you suggest me any way forward?

Through the Element API: Listening to User Events | Element API | Creating UI | Vaadin Docs

The same is available for v14 as well?

I need click event listener for text field