Package com.vaadin.flow.component.timepicker

Class TimePicker

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.AbstractField<C,T>
com.vaadin.flow.component.AbstractSinglePropertyField<TimePicker,LocalTime>
com.vaadin.flow.component.timepicker.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,LocalTime>,LocalTime>, HasValueAndElement<AbstractField.ComponentValueChangeEvent<TimePicker,LocalTime>,LocalTime>, HasAllowedCharPattern, HasAutoOpen, HasClearButton, HasClientValidation, HasOverlayClassName, HasPrefix, HasThemeVariant<TimePickerVariant>, HasTooltip, HasValidationProperties, InputField<AbstractField.ComponentValueChangeEvent<TimePicker,LocalTime>,LocalTime>, HasValidator<LocalTime>, Serializable
@Tag("vaadin-time-picker") @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="24.9.4") @NpmPackage(value="@vaadin/time-picker",version="24.9.4") @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/time-picker/src/vaadin-time-picker.js") @JsModule("./vaadin-time-picker/timepickerConnector.js") public class TimePicker extends AbstractSinglePropertyField<TimePicker,LocalTime> implements Focusable<TimePicker>, HasAllowedCharPattern, HasAriaLabel, HasAutoOpen, HasClearButton, HasClientValidation, InputField<AbstractField.ComponentValueChangeEvent<TimePicker,LocalTime>,LocalTime>, HasPrefix, HasOverlayClassName, HasThemeVariant<TimePickerVariant>, HasValidationProperties, HasValidator<LocalTime>, HasPlaceholder
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:

  • Constructor Details

  • Method Details

    • setErrorMessage

      public void setErrorMessage(String errorMessage)
      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 with setErrorMessage(String) will take priority and override any i18n error messages if both are set.

      Specified by:
      setErrorMessage in interface HasValidation
      Specified by:
      setErrorMessage in interface HasValidationProperties
      Parameters:
      errorMessage - the error message to set, or null to clear

    • setLabel

      public void setLabel(String label)
      Sets the label for the time picker.
      Specified by:
      setLabel in interface HasLabel
      Parameters:
      label - value for the label property in the time picker

    • setValue

      public void setValue(LocalTime value)
      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 interface HasValue<AbstractField.ComponentValueChangeEvent<TimePicker,LocalTime>,LocalTime>
      Overrides:
      setValue in class AbstractField<TimePicker,LocalTime>
      Parameters:
      value - the LocalTime instance representing the selected time, or null

    • setModelValue

      protected void setModelValue(LocalTime newModelValue, boolean fromClient)
      Description copied from class: AbstractField
      Updates the model value if the value has actually changed. Subclasses should call this method whenever the user has changed the value. A value change event is fired if the new value is different from the previous value according to AbstractField.valueEquals(Object, Object).

      If the value is from the client-side and this field is in readonly mode, then the new model value will be ignored. AbstractField.setPresentationValue(Object) will be called with the previous model value so that the representation shown to the user can be reverted.

      See AbstractField for an overall description on the difference between model values and presentation values.

      Overrides:
      setModelValue in class AbstractField<TimePicker,LocalTime>
      Parameters:
      newModelValue - the new internal value to use
      fromClient - true if the new value originates from the client; otherwise false

    • getLabel

      public String getLabel()
      Gets the label of the time picker.
      Specified by:
      getLabel in interface HasLabel
      Returns:
      the label property of the time picker

    • setAriaLabel

      public void setAriaLabel(String ariaLabel)
      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 interface HasAriaLabel
      Parameters:
      ariaLabel - the aria-label text to set or null to clear

    • getAriaLabel

      public Optional<String> getAriaLabel()
      Description copied from interface: HasAriaLabel
      Gets the aria-label of the component.
      Specified by:
      getAriaLabel in interface HasAriaLabel
      Returns:
      an optional aria-label of the component if no aria-label has been set

    • setAriaLabelledBy

      public void setAriaLabelledBy(String labelledBy)
      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 interface HasAriaLabel
      Parameters:
      labelledBy - the string with the id of the element that will be used as label or null to clear

    • getAriaLabelledBy

      public Optional<String> getAriaLabelledBy()
      Description copied from interface: HasAriaLabel
      Gets the aria-labelledby of the component
      Specified by:
      getAriaLabelledBy in interface HasAriaLabel
      Returns:
      an optional aria-labelledby of the component if no aria-labelledby has been set

    • getDefaultValidator

      public Validator<LocalTime> 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 interface HasValidator<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 by HasValidator.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 including HasValidator.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 interface HasValidator<LocalTime>
      Returns:
      Registration of the added listener.
      See Also:

    • isInputValuePresent

      @Deprecated(since="24.8") protected boolean isInputValuePresent()
      Deprecated.
      Since v24.8
      For internal use only.

      Returns whether the input element has a value or not.

      Returns:
      true if the input element's value is populated, false otherwise

    • isInputUnparsable

      protected final boolean isInputUnparsable()
      For internal use only.

      Returns whether the input value is unparsable.

      Returns:
      true if the input element's value is populated and unparsable, 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 interface HasValue<AbstractField.ComponentValueChangeEvent<TimePicker,LocalTime>,LocalTime>
      Specified by:
      setRequiredIndicatorVisible in interface HasValueAndElement<AbstractField.ComponentValueChangeEvent<TimePicker,LocalTime>,LocalTime>
      Parameters:
      required - true to make the field required, false otherwise
      See Also:

    • isRequiredIndicatorVisible

      public boolean isRequiredIndicatorVisible()
      Gets whether the user is required to provide a value.
      Specified by:
      isRequiredIndicatorVisible in interface HasValue<AbstractField.ComponentValueChangeEvent<TimePicker,LocalTime>,LocalTime>
      Specified by:
      isRequiredIndicatorVisible in interface HasValueAndElement<AbstractField.ComponentValueChangeEvent<TimePicker,LocalTime>,LocalTime>
      Returns:
      true if the field is required, false otherwise
      See 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

      public void setStep(Duration step)
      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 in hh: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, not null and should divide a day or an hour evenly

    • getStep

      public Duration 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 listener
      Returns:
      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) and HasValidation.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 interface HasValidation
      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 the errorMessage property based on the result. If a custom error message is provided with setErrorMessage(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

      protected void onAttach(AttachEvent attachEvent)
      Description copied from class: Component
      Called when the component is attached to a UI.

      This method is invoked before the AttachEvent is fired for the component.

      Make sure to call super.onAttach when overriding this method.
      Overrides:
      onAttach in class Component
      Parameters:
      attachEvent - the attach event

    • setLocale

      public void setLocale(Locale locale)
      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 to UI.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

      public Locale 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 to UI.getLocale(), unless setLocale(Locale) has been explicitly called before that.

      Overrides:
      getLocale in class Component
      Returns:
      the locale used for this time picker

    • setMin

      public void setMin(LocalTime min)
      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, or null to remove this constraint
      See Also:

    • getMin

      public LocalTime getMin()
      Gets the minimum time allowed to be selected for this field.
      Returns:
      the minimum time, or null if no minimum is set
      See Also:

    • setMax

      public void setMax(LocalTime max)
      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, or null to remove this constraint
      See Also:

    • getMax

      public LocalTime getMax()
      Gets the maximum time allowed to be selected for this field.
      Returns:
      the maximum time, or null if no maximum is set
      See Also:

    • getSupportedAvailableLocales

      public static Stream<Locale> 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 the Locale.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

      public TimePicker.TimePickerI18n 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

      public void setI18n(TimePicker.TimePickerI18n i18n)
      Sets the internationalization object for this component.
      Parameters:
      i18n - the i18n object, not null