Input field for time only?

Hi,

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.

//Harri

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.

//Harri

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

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 here) and integrate it using this tutorial
C: Use an existing Javascript Component (for example from here) and integrate it like this
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:
https://vaadin.com/book/-/page/components.datefield.html#components.datefield.resolution

But I don't want to see Calendar component

You can also do it buy building a server side component containing 2 or 3 select components. I've done an add-on 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 :)
.....

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

This works perfectly. Thank you.

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.setResolution(Resolution.SECOND);  
 df.setLocale(Locale.GERMANY);  // just because I dislike AM/PM and want 24h format
 df.addStyleName("time-only");

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(LocalDate.now(), 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);
timeStuff.addStyleName("time-only");
timeStuff.setResolution(Resolution.MINUTE);
timeStuff.setDateFormat("HH:mm");