Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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
I found a solution for that :)
simply hide the calender part by CSS:
java code:
InlineDateField date=new InlineDateField("Time: ");
date.setResolution(Resolution.MINUTE);
layout.addComponent(date);
CSS rule:
.v-inline-datefield-calendarpanel-header,.v-inline-datefield-calendarpanel-body{
display: none;
}
keep in mnd that the generated CSS rules for PopupDateField are different
Deleted User: I found a solution for that :)
.....
[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;
}
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");