com.vaadin.flow.component.datetimepicker.

Class DateTimePicker

All Implemented Interfaces:

AttachNotifier, BlurNotifier<DateTimePicker>, DetachNotifier, Focusable<DateTimePicker>, FocusNotifier<DateTimePicker>, HasElement, HasEnabled, HasHelper, HasLabel, HasSize, HasStyle, HasTheme, HasValidation, HasValue<AbstractField.ComponentValueChangeEvent<DateTimePicker,LocalDateTime>,LocalDateTime>, HasValueAndElement<AbstractField.ComponentValueChangeEvent<DateTimePicker,LocalDateTime>,LocalDateTime>, HasAutoOpen, HasClientValidation, HasOverlayClassName, HasThemeVariant<DateTimePickerVariant>, HasTooltip, HasValidationProperties, InputField<AbstractField.ComponentValueChangeEvent<DateTimePicker,LocalDateTime>,LocalDateTime>, HasValidator<LocalDateTime>, Serializable

@Tag("vaadin-date-time-picker") @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="24.7.0-alpha7") @NpmPackage(value="@vaadin/date-time-picker",version="24.7.0-alpha7") @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/date-time-picker/src/vaadin-date-time-picker.js") public class DateTimePicker extends AbstractSinglePropertyField<DateTimePicker,LocalDateTime> implements Focusable<DateTimePicker>, HasAutoOpen, HasClientValidation, InputField<AbstractField.ComponentValueChangeEvent<DateTimePicker,LocalDateTime>,LocalDateTime>, HasOverlayClassName, HasThemeVariant<DateTimePickerVariant>, HasValidationProperties, HasValidator<LocalDateTime>

Date Time Picker is an input field for selecting both a date and a time. The date and time can be entered directly using a keyboard in the format of the current locale or through the Date Time Picker?s two overlays. The overlays open when their respective fields are clicked or any input is entered when the fields are focused.

Author:

Vaadin Ltd

See Also:

  • Constructor Details

  • Method Details

    • setValue

      public void setValue(LocalDateTime value)

      Sets the selected date and 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<DateTimePicker,LocalDateTime>,LocalDateTime>

      Overrides:

      setValue in class AbstractField<DateTimePicker,LocalDateTime>

      Parameters:

      value - the LocalDateTime instance representing the selected date and time, or null

    • setReadOnly

      public void setReadOnly(boolean readOnly)

      Description copied from interface: HasValue

      Sets the read-only mode of this HasValue to given mode. The user can't change the value when in read-only mode.

      A HasValue with a visual component in read-only mode typically looks visually different to signal to the user that the value cannot be edited.

      Specified by:

      setReadOnly in interface HasValue<AbstractField.ComponentValueChangeEvent<DateTimePicker,LocalDateTime>,LocalDateTime>

      Specified by:

      setReadOnly in interface HasValueAndElement<AbstractField.ComponentValueChangeEvent<DateTimePicker,LocalDateTime>,LocalDateTime>

      Parameters:

      readOnly - a boolean value specifying whether the component is put read-only mode or not

    • setLabel

      public void setLabel(String label)

      Sets the label for this field.

      Specified by:

      setLabel in interface HasLabel

      Parameters:

      label - the String value to set

    • getLabel

      public String getLabel()

      Gets the label of this field.

      Specified by:

      getLabel in interface HasLabel

      Returns:

      the label property of the date time picker

    • setAriaLabel

      public void setAriaLabel(String ariaLabel)

      Sets the aria-label for the component.

      Parameters:

      ariaLabel - the value to set as aria-label

    • getAriaLabel

      public Optional<String> getAriaLabel()

      Gets the aria-label of the component.

      Returns:

      an optional aria-label or an empty optional if no aria-label has been set

    • setDateAriaLabel

      public void setDateAriaLabel(String dateLabel)

      Sets the aria-label suffix for the date picker.

      The suffix set with this method takes precedence over the suffix set with DateTimePicker.DateTimePickerI18n.setDateLabel(String).

      The date picker's final aria-label is a concatenation of DateTimePicker's getAriaLabel() or getLabel() and this suffix.

      Parameters:

      dateLabel - the value to be used as a suffix in the date picker aria-label.

    • getDateAriaLabel

      public Optional<String> getDateAriaLabel()

      Gets the aria-label suffix for the date picker.

      Note: this method will return the last value passed to setDateAriaLabel(String), not the value currently set on the `aria-label` attribute of the date picker input element.

      Returns:

      an optional label or an empty optional if no label has been set with this method before.

    • setTimeAriaLabel

      public void setTimeAriaLabel(String timeLabel)

      Sets the aria-label suffix for the time picker.

      The suffix set with this method takes precedence over the suffix set with DateTimePicker.DateTimePickerI18n.setTimeLabel(String).

      The time picker's final aria-label is a concatenation of DateTimePicker's getAriaLabel() or getLabel() and this suffix.

      Parameters:

      timeLabel - the value to be used as a suffix in the time picker aria-label.

    • getTimeAriaLabel

      public Optional<String> getTimeAriaLabel()

      Gets the aria-label suffix for the time picker.

      Note: this method will return the last value passed to setTimeAriaLabel(String), not the value currently set on the `aria-label` attribute of the time picker input element.

      Returns:

      an optional label or an empty optional if no label has been set with this method before.

    • setDatePlaceholder

      public void setDatePlaceholder(String placeholder)

      Sets a placeholder string for the date field.

      Parameters:

      placeholder - the String value to set

    • getDatePlaceholder

      public String getDatePlaceholder()

      Gets the placeholder string of the date field.

      Returns:

      the placeholder property of the date picker

    • setTimePlaceholder

      public void setTimePlaceholder(String placeholder)

      Set a placeholder string for the time field.

      Parameters:

      placeholder - the String value to set

    • getTimePlaceholder

      public String getTimePlaceholder()

      Gets the placeholder string of the time field.

      Returns:

      the placeholder property of the time picker

    • 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.

      Returns:

      the step property from the picker, unit seconds

    • setWeekNumbersVisible

      public void setWeekNumbersVisible(boolean weekNumbersVisible)

      Show or hide the week numbers in the date picker. By default the week numbers are not shown.

      Set true to display ISO-8601 week numbers in the calendar.

      Note that displaying of week numbers is only supported when datePickerI18n.firstDayOfWeek is 1 (Monday).

      Parameters:

      weekNumbersVisible - the boolean value to set

      See Also:

    • isWeekNumbersVisible

      public boolean isWeekNumbersVisible()

      Get the state of showWeekNumbers property of the date picker.

      Returns:

      the showWeekNumbers property from the date picker

    • setLocale

      public void setLocale(Locale locale)

      Set the Locale for the DateTimePicker. The displayed date and time will be matched to the format used in that locale.

      Parameters:

      locale - the locale to set to the DateTimePicker, cannot be null

    • getLocale

      public Locale getLocale()

      Gets the Locale for this DateTimePicker

      Overrides:

      getLocale in class Component

      Returns:

      the locale used for this DateTimePicker

    • addThemeName

      public void addThemeName(String themeName)

      Adds a theme name to this component.

      Specified by:

      addThemeName in interface HasTheme

      Parameters:

      themeName - the theme name to add, not null

    • removeThemeName

      public boolean removeThemeName(String themeName)

      Removes a theme name from this component.

      Specified by:

      removeThemeName in interface HasTheme

      Parameters:

      themeName - the theme name to remove, not null

      Returns:

      true if the theme name was removed, false if the theme list didn't contain the theme name

    • setThemeName

      public void setThemeName(String themeName)

      Sets the theme names of this component. This method overwrites any previous set theme names.

      Specified by:

      setThemeName in interface HasTheme

      Parameters:

      themeName - a space-separated string of theme names to set, or empty string to remove all theme names

    • setThemeName

      public void setThemeName(String themeName, boolean set)

      Sets or removes the given theme name for this component.

      Specified by:

      setThemeName in interface HasTheme

      Parameters:

      themeName - the theme name to set or remove, not null

      set - true to set the theme name, false to remove it

    • addThemeNames

      public void addThemeNames(String... themeNames)

      Adds one or more theme names to this component. Multiple theme names can be specified by using multiple parameters.

      Specified by:

      addThemeNames in interface HasTheme

      Parameters:

      themeNames - the theme name or theme names to be added to the component

    • removeThemeNames

      public void removeThemeNames(String... themeNames)

      Removes one or more theme names from component. Multiple theme names can be specified by using multiple parameters.

      Specified by:

      removeThemeNames in interface HasTheme

      Parameters:

      themeNames - the theme name or theme names to be removed from the component

    • getDefaultValidator

      public Validator<LocalDateTime> 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<LocalDateTime>

      Returns:

      state validator

    • addValidationStatusChangeListener

      public Registration addValidationStatusChangeListener(ValidationStatusChangeListener<LocalDateTime> 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<LocalDateTime>

      Returns:

      Registration of the added listener.

      See Also:

    • 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 HasValidationProperties.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.

    • setMin

      public void setMin(LocalDateTime min)

      Sets the minimum date and time in the date time picker. Dates and times before that will be disabled in the popups.

      Parameters:

      min - the minimum date and time that is allowed to be set, or null to remove any minimum constraints

    • getMin

      public LocalDateTime getMin()

      Gets the minimum date and time in the date time picker. Dates and times before that will be disabled in the popups.

      Returns:

      the minimum date and time that is allowed to be set, or null if there's no minimum

    • setMax

      public void setMax(LocalDateTime max)

      Sets the maximum date and time in the date time picker. Dates and times above that will be disabled in the popups.

      Parameters:

      max - the maximum date and time that is allowed to be set, or null to remove any minimum constraints

    • getMax

      public LocalDateTime getMax()

      Gets the maximum date and time in the date time picker. Dates and times above that will be disabled in the popups.

      Returns:

      the maximum date and time that is allowed to be set, or null if there's no minimum

    • getDatePickerI18n

      public DatePicker.DatePickerI18n getDatePickerI18n()

      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 setDatePickerI18n(DatePickerI18n)

      Returns:

      the i18n object or null if no i18n object has been set

    • setDatePickerI18n

      public void setDatePickerI18n(DatePicker.DatePickerI18n i18n)

      Sets the internationalization properties for the date picker inside this component.

      Parameters:

      i18n - the i18n object, not null

    • 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 back using setI18n(DateTimePickerI18n)

      Returns:

      the i18n object. It will be null, If the i18n properties weren't set.

    • setI18n

      public void setI18n(DateTimePicker.DateTimePickerI18n i18n)

      Sets the internationalization properties for this component.

      Parameters:

      i18n - the internationalized properties, not null

    • setAutoOpen

      public void setAutoOpen(boolean autoOpen)

      When auto open is enabled, the dropdown will open when the field is clicked.

      Specified by:

      setAutoOpen in interface HasAutoOpen

      Parameters:

      autoOpen - Value for the auto open property,

    • 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