com.vaadin.flow.component.timepicker.
Class TimePicker
All Implemented Interfaces:
AttachNotifier
, BlurNotifier<TimePicker>
, DetachNotifier
, Focusable<TimePicker>
, FocusNotifier<TimePicker>
, HasAriaLabel
, HasElement
, HasEnabled
, HasHelper
, HasLabel
, HasPlaceholder
, HasSize
, HasStyle
, HasTheme
, HasValidation
, HasValue<AbstractField.ComponentValueChangeEvent<TimePicker,
, HasValueAndElement<AbstractField.ComponentValueChangeEvent<TimePicker,
, HasAllowedCharPattern
, HasAutoOpen
, HasClearButton
, HasClientValidation
, HasOverlayClassName
, HasPrefix
, HasThemeVariant<TimePickerVariant>
, HasTooltip
, HasValidationProperties
, InputField<AbstractField.ComponentValueChangeEvent<TimePicker,
, HasValidator<LocalTime>
, Serializable
Time Picker is an input field for entering or selecting a specific time. The time can be entered directly using a keyboard or by choosing a value from a set of predefined options presented in an overlay. The overlay opens when the field is clicked or any input is entered when the field is focused.
Validation
Time Picker comes with a built-in validation mechanism based on constraints. Validation is triggered whenever the user initiates a time change, for example by selection from the dropdown or manual entry followed by Enter or blur. Programmatic value changes trigger validation as well.
Validation verifies that the value is parsable into LocalTime
and
satisfies the specified constraints. If validation fails, the component is
marked as invalid and an error message is displayed below the input.
The following constraints are supported:
Error messages for unparsable input and constraints can be configured with
the TimePicker.TimePickerI18n
object, using the respective properties. If you
want to provide a single catch-all error message, you can also use the
setErrorMessage(String)
method. Note that such an error message will
take priority over i18n error messages if both are set.
In addition to validation, constraints may also have a visual impact. For example, times before the minimum time or after the maximum time are not displayed in the dropdown to prevent their selection.
For more advanced validation that requires custom rules, you can use
Binder
. By default, before running custom validators, Binder will
also check if the time is parsable and satisfies the component constraints,
displaying error messages from the TimePicker.TimePickerI18n
object. The
exception is the required constraint, for which Binder provides its own API,
see asRequired()
.
However, if Binder doesn't fit your needs and you want to implement fully
custom validation logic, you can disable the constraint validation by setting
setManualValidation(boolean)
to true. This will allow you to control
the invalid state and the error message manually using
HasValidationProperties.setInvalid(boolean)
and setErrorMessage(String)
API.
Author:
Vaadin Ltd
See Also:
-
Nested Class Summary
Nested ClassesModifier and TypeClassDescriptionstatic class
invalid-changed
event is sent when the invalid state changes.static class
The internationalization properties for
TimePicker
.Nested classes/interfaces inherited from class com.vaadin.flow.component.AbstractField
AbstractField.ComponentValueChangeEvent<C extends Component,
V> Nested classes/interfaces inherited from interface com.vaadin.flow.component.BlurNotifier
BlurNotifier.BlurEvent<C extends Component>
Nested classes/interfaces inherited from interface com.vaadin.flow.component.FocusNotifier
FocusNotifier.FocusEvent<C extends Component>
Nested classes/interfaces inherited from interface com.vaadin.flow.component.shared.HasClientValidation
HasClientValidation.ClientValidatedEvent
Nested classes/interfaces inherited from interface com.vaadin.flow.component.HasValue
HasValue.ValueChangeEvent<V>, HasValue.ValueChangeListener<E extends HasValue.ValueChangeEvent<?>>
-
Constructor Summary
ConstructorsConstructorDescriptionDefault constructor.
TimePicker
(HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<TimePicker, LocalTime>> listener) Convenience constructor to create a time picker with a
HasValue.ValueChangeListener
.TimePicker
(String label) Convenience constructor to create a time picker with a label.
TimePicker
(String label, LocalTime time) Convenience constructor to create a time picker with a pre-selected time and a label.
TimePicker
(String label, LocalTime time, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<TimePicker, LocalTime>> listener) Convenience constructor to create a time picker with a label, a pre-selected time and a
HasValue.ValueChangeListener
.TimePicker
(LocalTime time) Convenience constructor to create a time picker with a pre-selected time.
TimePicker
(LocalTime time, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<TimePicker, LocalTime>> listener) Convenience constructor to create a time picker with a pre-selected time and
HasValue.ValueChangeListener
. -
Method Summary
Modifier and TypeMethodDescriptionAdds a listener for
invalid-changed
events fired by the webcomponent.Enables the implementing components to notify changes in their validation status to the observers.
Gets the aria-label of the component.
Gets the aria-labelledby of the component
Returns a validator that checks the state of the Value.
getI18n()
Gets the internationalization object previously set for this component.
getLabel()
Gets the label of the time picker.
Gets the Locale for this time picker.
getMax()
Gets the maximum time allowed to be selected for this field.
getMin()
Gets the minimum time allowed to be selected for this field.
getStep()
Gets the step of the time picker.
Returns a stream of all the available locales that are supported by the time picker component.
protected boolean
Returns whether the input element has a value or not.
boolean
Alias for
isRequiredIndicatorVisible()
boolean
Gets whether the user is required to provide a value.
protected void
onAttach
(AttachEvent attachEvent) Called when the component is attached to a UI.
void
setAriaLabel
(String ariaLabel) Set the aria-label of the component to the given text.
void
setAriaLabelledBy
(String labelledBy) Set the aria-labelledby of the component.
void
setErrorMessage
(String errorMessage) Sets a single error message to display for all constraint violations.
void
Sets the internationalization object for this component.
void
Sets the label for the time picker.
void
Set the Locale for the Time Picker.
void
setManualValidation
(boolean enabled) Sets whether manual validation mode is enabled for the component.
void
Sets the maximum time allowed to be selected for this field.
void
Sets the minimum time allowed to be selected for this field.
void
setRequired
(boolean required) Alias for
setRequiredIndicatorVisible(boolean)
.void
setRequiredIndicatorVisible
(boolean required) Sets whether the user is required to provide a value.
void
Sets the
step
property of the time picker using duration.void
Sets the selected time value of the component.
protected void
validate()
Validates the current value against the constraints and sets the
invalid
property and theerrorMessage
property based on the result.Methods inherited from class com.vaadin.flow.component.AbstractSinglePropertyField
getSynchronizationRegistration, hasValidValue, setPresentationValue, setSynchronizedEvent
Methods inherited from class com.vaadin.flow.component.AbstractField
addValueChangeListener, getEmptyValue, getValue, isEmpty, setModelValue, valueEquals
Methods inherited from class com.vaadin.flow.component.Component
addListener, findAncestor, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getListeners, getParent, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onDetach, onEnabledStateChanged, removeFromParent, scrollIntoView, scrollIntoView, set, setElement, setId, setVisible
Methods inherited from class java.lang.Object
clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait
Methods inherited from interface com.vaadin.flow.component.AttachNotifier
addAttachListener
Methods inherited from interface com.vaadin.flow.component.BlurNotifier
addBlurListener
Methods inherited from interface com.vaadin.flow.component.DetachNotifier
addDetachListener
Methods inherited from interface com.vaadin.flow.component.Focusable
addFocusShortcut, blur, focus, getTabIndex, setTabIndex
Methods inherited from interface com.vaadin.flow.component.FocusNotifier
addFocusListener
Methods inherited from interface com.vaadin.flow.component.shared.HasAllowedCharPattern
getAllowedCharPattern, setAllowedCharPattern
Methods inherited from interface com.vaadin.flow.component.shared.HasAutoOpen
isAutoOpen, setAutoOpen
Methods inherited from interface com.vaadin.flow.component.shared.HasClearButton
isClearButtonVisible, setClearButtonVisible
Methods inherited from interface com.vaadin.flow.component.shared.HasClientValidation
addClientValidatedEventListener
Methods inherited from interface com.vaadin.flow.component.HasElement
getElement
Methods inherited from interface com.vaadin.flow.component.HasEnabled
isEnabled, setEnabled
Methods inherited from interface com.vaadin.flow.component.HasHelper
getHelperComponent, getHelperText, setHelperComponent, setHelperText
Methods inherited from interface com.vaadin.flow.component.shared.HasOverlayClassName
getOverlayClassName, setOverlayClassName
Methods inherited from interface com.vaadin.flow.component.HasPlaceholder
getPlaceholder, setPlaceholder
Methods inherited from interface com.vaadin.flow.component.shared.HasPrefix
getPrefixComponent, setPrefixComponent
Methods inherited from interface com.vaadin.flow.component.HasSize
getHeight, getHeightUnit, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getWidth, getWidthUnit, setHeight, setHeight, setHeightFull, setMaxHeight, setMaxHeight, setMaxWidth, setMaxWidth, setMinHeight, setMinHeight, setMinWidth, setMinWidth, setSizeFull, setSizeUndefined, setWidth, setWidth, setWidthFull
Methods inherited from interface com.vaadin.flow.component.HasStyle
addClassName, addClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName
Methods inherited from interface com.vaadin.flow.component.HasTheme
addThemeName, addThemeNames, getThemeName, getThemeNames, hasThemeName, removeThemeName, removeThemeNames, setThemeName, setThemeName
Methods inherited from interface com.vaadin.flow.component.shared.HasThemeVariant
addThemeVariants, removeThemeVariants
Methods inherited from interface com.vaadin.flow.component.shared.HasTooltip
getTooltip, setTooltipText
Methods inherited from interface com.vaadin.flow.component.shared.HasValidationProperties
getErrorMessage, isInvalid, setInvalid
Methods inherited from interface com.vaadin.flow.component.HasValue
addValueChangeListener, clear, getEmptyValue, getOptionalValue, getValue, isEmpty
Methods inherited from interface com.vaadin.flow.component.HasValueAndElement
isReadOnly, setReadOnly
-
Constructor Details
-
TimePicker
public TimePicker()Default constructor.
-
TimePicker
Convenience constructor to create a time picker with a pre-selected time.
Parameters:
time
- the pre-selected time in the picker -
TimePicker
Convenience constructor to create a time picker with a label.
Parameters:
label
- the label describing the time pickerSee Also:
-
TimePicker
Convenience constructor to create a time picker with a pre-selected time and a label.
Parameters:
label
- the label describing the time pickertime
- the pre-selected time in the picker -
TimePicker
public TimePicker(HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<TimePicker, LocalTime>> listener) Convenience constructor to create a time picker with a
HasValue.ValueChangeListener
.Parameters:
listener
- the listener to receive value change eventsSee Also:
-
TimePicker
public TimePicker(LocalTime time, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<TimePicker, LocalTime>> listener) Convenience constructor to create a time picker with a pre-selected time and
HasValue.ValueChangeListener
.Parameters:
time
- the pre-selected time in the pickerlistener
- the listener to receive value change eventsSee Also:
-
TimePicker
public TimePicker(String label, LocalTime time, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<TimePicker, LocalTime>> listener) Convenience constructor to create a time picker with a label, a pre-selected time and a
HasValue.ValueChangeListener
.Parameters:
label
- the label describing the time pickertime
- the pre-selected time in the pickerlistener
- the listener to receive value change eventsSee Also:
-
-
Method Details
-
setErrorMessage
Sets a single error message to display for all constraint violations. The error message will only appear when the component is flagged as invalid, either as a result of constraint validation or by the developer through
HasValidationProperties.setInvalid(boolean)
if manual validation mode is enabled.Distinct error messages for unparsable input and different constraints can be configured with the
TimePicker.TimePickerI18n
object, using the respective properties. However, note that the error message set withsetErrorMessage(String)
will take priority and override any i18n error messages if both are set.Specified by:
setErrorMessage
in interfaceHasValidation
Specified by:
setErrorMessage
in interfaceHasValidationProperties
Parameters:
errorMessage
- the error message to set, ornull
to clear -
setLabel
Sets the label for the time picker.
-
setValue
Sets the selected time value of the component. The value can be cleared by setting null.
The value will be truncated to millisecond precision, as that is the maximum that the time picker supports. This means that
AbstractField.getValue()
might return a different value than what was passed in.Specified by:
setValue
in interfaceHasValue<AbstractField.ComponentValueChangeEvent<TimePicker,
LocalTime>, LocalTime> Overrides:
setValue
in classAbstractField<TimePicker,
LocalTime> Parameters:
value
- the LocalTime instance representing the selected time, or null -
getLabel
Gets the label of the time picker.
-
setAriaLabel
Description copied from interface:
HasAriaLabel
Set the aria-label of the component to the given text.
This method should not be used if
HasAriaLabel.setAriaLabelledBy(String)
is also used. If both attributes are present, aria-labelledby will take precedence over aria-label.Specified by:
setAriaLabel
in interfaceHasAriaLabel
Parameters:
ariaLabel
- the aria-label text to set ornull
to clear -
getAriaLabel
Description copied from interface:
HasAriaLabel
Gets the aria-label of the component.
Specified by:
getAriaLabel
in interfaceHasAriaLabel
Returns:
an optional aria-label of the component if no aria-label has been set
-
setAriaLabelledBy
Description copied from interface:
HasAriaLabel
Set the aria-labelledby of the component. The value must be a valid id attribute of another element that labels the component. The label element must be in the same DOM scope of the component, otherwise screen readers may fail to announce the label content properly.
This method should not be used if
HasAriaLabel.setAriaLabel(String)
is also used. If both attributes are present, aria-labelledby will take precedence over aria-label.Specified by:
setAriaLabelledBy
in interfaceHasAriaLabel
Parameters:
labelledBy
- the string with the id of the element that will be used as label ornull
to clear -
getAriaLabelledBy
Description copied from interface:
HasAriaLabel
Gets the aria-labelledby of the component
Specified by:
getAriaLabelledBy
in interfaceHasAriaLabel
Returns:
an optional aria-labelledby of the component if no aria-labelledby has been set
-
getDefaultValidator
Description copied from interface:
HasValidator
Returns a validator that checks the state of the Value. This should be overridden for components with internal value conversion or validation, e.g. when the user is providing a string that has to be parsed into a date. An invalid input from user will be exposed to a
Binder
and can be seen as a validation failure.Specified by:
getDefaultValidator
in interfaceHasValidator<LocalTime>
Returns:
state validator
-
addValidationStatusChangeListener
public Registration addValidationStatusChangeListener(ValidationStatusChangeListener<LocalTime> listener) Description copied from interface:
HasValidator
Enables the implementing components to notify changes in their validation status to the observers.
Note: This method can be overridden by the implementing classes e.g. components, to enable the associated
Binder.Binding
instance subscribing for their validation change events and revalidate itself.This method primarily designed for notifying the Binding about the validation status changes of a bound component at the client-side. WebComponents such as
<vaadin-date-picker>
or any other component that accept a formatted text as input should be able to communicate their invalid status to their server-side instance, and a bound server-side component instance must notify its binding about this validation status change as well. When the binding instance revalidates, a chain of validators and convertors get executed one of which is the default validator provided byHasValidator.getDefaultValidator()
. Thus, In order for the binding to be able to show/clear errors for its associated bound field, it is important that implementing components take that validation status into account while implementing any validator and converter includingHasValidator.getDefaultValidator()
. Here is an example:@Tag("date-picker-demo") public class DatePickerDemo implements HasValidator<LocalDate> { // Each web component has a way to communicate its validation status // to its server-side component instance. The following // clientSideValid state is introduced here just for the sake of // simplicity of this code snippet: boolean clientSideValid = true; /** * Note how
clientSideValid
engaged in the definition of * this method. It is important to reflect this status either in the * returning validation result of this method or any other validation * that is associated with this component. */ @Override public Validator getDefaultValidator() { return (value, valueContext) -> clientSideValid ? ValidationResult.ok() : ValidationResult.error("Invalid date format"); } private final Collection<ValidationStatusChangeListener<LocalDate>> validationStatusListeners = new ArrayList<>(); /** * This enables the binding to subscribe for the validation status * change events that are fired by this component and revalidate * itself respectively. */ @Override public Registration addValidationStatusChangeListener( ValidationStatusChangeListener<LocalDate> listener) { validationStatusListeners.add(listener); return () -> validationStatusListeners.remove(listener); } private void fireValidationStatusChangeEvent( boolean newValidationStatus) { if (this.clientSideValid != newValidationStatus) { this.clientSideValid = newValidationStatus; var event = new ValidationStatusChangeEvent<>(this, newValidationStatus); validationStatusListeners.forEach( listener -> listener.validationStatusChanged(event)); } } }Specified by:
addValidationStatusChangeListener
in interfaceHasValidator<LocalTime>
Returns:
Registration of the added listener.
See Also:
-
isInputValuePresent
protected boolean isInputValuePresent()Returns whether the input element has a value or not.
Returns:
true
if the input element's value is populated,false
otherwise -
setRequiredIndicatorVisible
public void setRequiredIndicatorVisible(boolean required) Sets whether the user is required to provide a value. When required, an indicator appears next to the label and the field invalidates if the value is cleared.
NOTE: The required indicator is only visible when the field has a label, see
setLabel(String)
.Specified by:
setRequiredIndicatorVisible
in interfaceHasValue<AbstractField.ComponentValueChangeEvent<TimePicker,
LocalTime>, LocalTime> Specified by:
setRequiredIndicatorVisible
in interfaceHasValueAndElement<AbstractField.ComponentValueChangeEvent<TimePicker,
LocalTime>, LocalTime> Parameters:
required
-true
to make the field required,false
otherwiseSee Also:
-
isRequiredIndicatorVisible
public boolean isRequiredIndicatorVisible()Gets whether the user is required to provide a value.
Specified by:
isRequiredIndicatorVisible
in interfaceHasValue<AbstractField.ComponentValueChangeEvent<TimePicker,
LocalTime>, LocalTime> Specified by:
isRequiredIndicatorVisible
in interfaceHasValueAndElement<AbstractField.ComponentValueChangeEvent<TimePicker,
LocalTime>, LocalTime> Returns:
true
if the field is required,false
otherwiseSee Also:
-
setRequired
public void setRequired(boolean required) Alias for
setRequiredIndicatorVisible(boolean)
.Parameters:
required
-true
to make the field required,false
otherwise -
isRequired
public boolean isRequired()Alias for
isRequiredIndicatorVisible()
Returns:
true
if the field is required,false
otherwise -
setStep
Sets the
step
property of the time picker using duration. It specifies the intervals for the displayed items in the time picker dropdown and also the displayed time format.The set step needs to evenly divide a day or an hour and has to be larger than 0 milliseconds. By default, the format is
hh:mm
(same as *Duration.ofHours(1)
If the step is less than 60 seconds, the format will be changed to
hh:mm:ss
and it can be inhh:mm:ss.fff
format, when the step is less than 1 second.NOTE: If the step is less than 900 seconds, the dropdown is hidden.
NOTE: changing the step to a larger duration can cause a new
HasValue.ValueChangeEvent
to be fired if some parts (eg. seconds) is discarded from the value.Parameters:
step
- the step to set, notnull
and should divide a day or an hour evenly -
getStep
Gets the step of the time picker.
This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.
Returns:
the
step
property from the picker, unit seconds -
addInvalidChangeListener
public Registration addInvalidChangeListener(ComponentEventListener<TimePicker.InvalidChangeEvent> listener) Adds a listener for
invalid-changed
events fired by the webcomponent.Parameters:
listener
- the listenerReturns:
a
Registration
for removing the event listener -
setManualValidation
public void setManualValidation(boolean enabled) Description copied from interface:
HasValidation
Sets whether manual validation mode is enabled for the component.
When enabled, the component doesn't perform its built-in constraint validation on value change, blur, and other events. This allows manually controlling the invalid state and error messages using the
HasValidation.setInvalid(boolean)
andHasValidation.setErrorMessage(String)
methods. Manual mode is helpful when there is a need for a totally custom validation logic that cannot be achieved with Binder.Example:
Field field = new Field(); field.setManualValidation(true); field.addValueChangeListener(event -> { if (Objects.equal(event.getValue(), "")) { field.setInvalid(true); field.setErrorMessage("The field is required."); } else { field.setInvalid(false); } });
For components that don't have built-in validation, the method has no effect.
Specified by:
setManualValidation
in interfaceHasValidation
Parameters:
enabled
- whether to enable manual validation mode. -
validate
protected void validate()Validates the current value against the constraints and sets the
invalid
property and theerrorMessage
property based on the result. If a custom error message is provided withsetErrorMessage(String)
, it is used. Otherwise, the error message defined in the i18n object is used.The method does nothing if the manual validation mode is enabled.
-
onAttach
Description copied from class:
Component
Called when the component is attached to a UI.
This method is invoked before the
Make sure to callAttachEvent
is fired for the component.super.onAttach
when overriding this method. -
setLocale
Set the Locale for the Time Picker. The displayed time will be formatted by the browser using the given locale.
By default, the locale is
null
until the component is attached to an UI, and then locale is set toUI.getLocale()
, unless a locale has been explicitly set before that.The time formatting is done in the browser using the Date.toLocaleTimeString() function.
If for some reason the browser doesn't support the given locale, the en-US locale is used.
NOTE: only the language + country/region codes are used. This means that the script and variant information is not used and supported. NOTE: timezone related data is not supported. NOTE: changing the locale does not cause a new
HasValue.ValueChangeEvent
to be fired.Parameters:
locale
- the locale set to the time picker, cannot be [@code null} -
getLocale
Gets the Locale for this time picker.
By default, the locale is
null
until the component is attached to an UI, and then locale is set toUI.getLocale()
, unlesssetLocale(Locale)
has been explicitly called before that. -
setMin
Sets the minimum time allowed to be selected for this field. Times before that won't be displayed in the dropdown. Manual entry of such times will cause the component to invalidate.
The minimum time is inclusive.
Parameters:
min
- the minimum time, ornull
to remove this constraintSee Also:
-
getMin
Gets the minimum time allowed to be selected for this field.
Returns:
the minimum time, or
null
if no minimum is setSee Also:
-
setMax
Sets the maximum time allowed to be selected for this field. Times after that won't be displayed in the dropdown. Manual entry of such times will cause the component to invalidate.
The maximum time is inclusive.
Parameters:
max
- the maximum time, ornull
to remove this constraintSee Also:
-
getMax
Gets the maximum time allowed to be selected for this field.
Returns:
the maximum time, or
null
if no maximum is setSee Also:
-
getSupportedAvailableLocales
Returns a stream of all the available locales that are supported by the time picker component.
This is a shorthand for
Locale.getAvailableLocales()
where all locales without theLocale.getLanguage()
have been filtered out, as the browser cannot localize the time for those.Returns:
a stream of the available locales that are supported by the time picker component
See Also:
-
getI18n
Gets the internationalization object previously set for this component.
NOTE: Updating the instance that is returned from this method will not update the component if not set again using
setI18n(TimePickerI18n)
Returns:
the i18n object or
null
if no i18n object has been set -
setI18n
Sets the internationalization object for this component.
Parameters:
i18n
- the i18n object, notnull
-