Input field for time only?


There is nice PopupDateField-class that I use to edit timestamps and dates. Is there a component that allows similar editing for time only? If I set PopupDateField resolution so that time is editable, date becomes also visible and now I’d need editor for time only.


Unfortunately no. It should be somewhat trivial to do though, just two NativeSelects, ComboBoxes, or something similar.

OK, just wanted to know if that exists or not, so that I don’t develop something that already exists.


How about now?
I search for a while for this :slight_smile:

Best regards

Not as far as i know but you could:
A: Try to create one with plain Vaadin Components
B: Take an existing TimePicker GWT Component (for example from
) and integrate it using
this tutorial

C: Use an existing Javascript Component (for example from
) and integrate it like

D: Write a gwt or js component yourself and integrate it in Vaadin

When using Vaadin 7 the integration isn’t as difficult as it may sound.

P.S. Found one already existing in the directory but i personally find that the gwt ones looked better.
TimeField Addon for Vaadin

From Vaadin 7 try:

But I don’t want to see Calendar component

I found a solution for that :slight_smile:

simply hide the calender part by CSS:

java code:
InlineDateField date=new InlineDateField("Time: ");

CSS rule:
display: none;

keep in mnd that the generated CSS rules for PopupDateField are different

You can also do it buy building a server side component containing 2 or 3 select components. I’ve done an
for the date part of it, but it would be just as straight forward to show the time part.

Deleted User: I found a solution for that :slight_smile:

[Deleted User]
, this works for all used date fields. How to apply to some fields only?

Give the datefield a stylename:

date.addStyleName("time-only"); target the CSS to only those fields that has the time-only class name:

.time-only .v-inline-datefield-calendarpanel-header,
.time-only .v-inline-datefield-calendarpanel-body {
  display: none;

This works perfectly. Thank you.

is there a way to set the time fields nullable?

Just wanted to add the full solution for both inline and popup DateField.

Your CSS:

.time-only .v-inline-datefield-calendarpanel-header,
.time-only .v-inline-datefield-calendarpanel-body {
    display: none;
.time-only .v-datefield-calendarpanel-header,
.time-only .v-datefield-calendarpanel-body {
    display: none;

and the code:

 DateField df = new DateField("My time has come");  // popup date field
 df.setLocale(Locale.GERMANY);  // just because I dislike AM/PM and want 24h format

Just an update for above answer. In Vaadin 8 there is now a DateTimeField and InlineDateTimeField. They use the same CSS classes, so only difference is class name and Resolution enum is changed to DateTimeResolution.

I encountered a strange problem, if I set time like this:

LocalDateTime.of(LocalDate.MIN, LocalTime.of(hour, minute);

then whatever the hour and minute were set, it was always displayed as 01:00 and setting

LocalDateTime.of(, LocalTime.of(hours, minutes);

seems to have fixed it. LocalDate should not matter if we only need time.

To solve with Vaadin 7:

PopupDateField timeStuff = new PopupDateField(sCaption);