← Back

TimeSelector Add-on

Time selection add-on

Author

Rating

Popularity

100+

TimeSelector is a component that enables simple selection of the time using a circle. All parts except for the circle selector can be themed using css to get the look and feel that one needs.

The circle selector is supports both desktops and mobiles.

Sample code

final TimeSelector selector = new TimeSelector();
selector.addSelectionChangeListener(new TimeSelector.SelectionChangeListener() {

  @Override
  public void selectionChanged(TimeSelector.SelectionChangeEvent event) {
    System.out.println(event.getHours() + ":" + event.getMinutes());
  }
});

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Vaadin 24 support version with 12 and 24 h clock support. TimeSelector now handles time as TimeLocal instead of String.

Released: 2023-03-31
Maturity: BETA
License: Apache License 2.0

Compatibility

Framework: Vaadin 23+; Vaadin 7.5+ in 1.0; Vaadin 10+ in 10.0.0-alpha1; Vaadin 8.0+ in 2.0.0; Vaadin 14+ in 14.0.0-beta1
Browser: Firefox; Opera; Safari; Google Chrome; Microsoft Edge

TimeSelector Add-on - Vaadin Add-on Directory

Time selection add-on

TimeSelector is a component that enables simple selection of the time using a circle. All parts except for the circle selector can be themed using css to get the look and feel that one needs. The circle selector is supports both desktops and mobiles.

Online Demo
Issue Tracker
Source Code
Discussion Forum

TimeSelector Add-on version 1.0
null

TimeSelector Add-on version 1.1
* Selector is now a Field * Added z-index (issue #2) * different 24h and 12h formats (24h doesn't have am/pm buttons)

TimeSelector Add-on version 1.1.1
In 12h mode show AM/PM as we don't show it in 24h format anymore

TimeSelector Add-on version 1.2.0
* It's now possible to limit selectable times in TimeSelector * Circle selector can now also be used as a standalone component

TimeSelector Add-on version 1.2.1
- setValue(Integer) on server side is now reflected in the client. - Component tested OK with Vaadin version 7.7.5

TimeSelector Add-on version 2.0.0
- Updated to Vaadin 8.0.0 - TimeSelector now returns LocalTime instead of Date

TimeSelector Add-on version 10.0.0-alpha1
Vaadin 10+ compatible version of the TimeSelector. - TimeSelector component with popup selector. - CircleSelect for stand alone usage. Missing features: - am/pm support. - styling

TimeSelector Add-on version 2.0.1

TimeSelector Add-on version 14.0.0-beta1
Updated version of the TimeSelector add-on component for v14.8+ Beta1 adds only basic 24h feature for the TimeSelector. CircleSelector new feature from older versions is: Colors can be themed with css, for instance using the element API: ``` final Style style = circleSelect.getElement().getStyle(); style.set("--circle-inside", "GhostWhite"); style.set("--circle-selector", "Indigo"); style.set("--circle-selector-dot", "RebeccaPurple"); style.set("--circle-text", "SpringGreen"); ```

TimeSelector Add-on version 24.0.0-beta1
Vaadin 24 support version with 12 and 24 h clock support. TimeSelector now handles time as TimeLocal instead of String.

Directory