Input field for time only?

Vaadin 6 / 7 / 8 Framework UI
1

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

2

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

3

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

//Harri

4

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

Best regards

5

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

6

From Vaadin 7 try:
https://vaadin.com/book/-/page/components.datefield.html#components.datefield.resolution

7

But I don’t want to see Calendar component

8

I found a solution for that :slight_smile:

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
20101.png

9

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.

10

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?

11

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;
}
12

This works perfectly. Thank you.

13

is there a way to set the time fields nullable?

14

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");
15

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.

16

To solve with Vaadin 7:

PopupDateField timeStuff = new PopupDateField(sCaption);
timeStuff.addStyleName("time-only");
timeStuff.setResolution(Resolution.MINUTE);
timeStuff.setDateFormat("HH:mm");