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,
, HasValueAndElement<AbstractField.ComponentValueChangeEvent<DateTimePicker,
, HasAutoOpen
, HasClientValidation
, HasOverlayClassName
, HasThemeVariant<DateTimePickerVariant>
, HasTooltip
, HasValidationProperties
, InputField<AbstractField.ComponentValueChangeEvent<DateTimePicker,
, HasValidator<LocalDateTime>
, Serializable
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:
-
Nested Class Summary
Nested ClassesModifier and TypeClassDescriptionstatic class
The internationalization properties for
DateTimePicker
.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.
DateTimePicker
(HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<DateTimePicker, LocalDateTime>> listener) Convenience constructor to create a date time picker with a
HasValue.ValueChangeListener
.DateTimePicker
(String label) Convenience constructor to create a date time picker with a label.
DateTimePicker
(String label, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<DateTimePicker, LocalDateTime>> listener) Convenience constructor to create a date time picker with a
HasValue.ValueChangeListener
and a label.DateTimePicker
(String label, LocalDateTime initialDateTime) Convenience constructor to create a date time picker with a pre-selected date and time in current UI locale format and a label.
DateTimePicker
(String label, LocalDateTime initialDateTime, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<DateTimePicker, LocalDateTime>> listener) Convenience constructor to create a date time picker with a pre-selected date and time in current UI locale format, a
HasValue.ValueChangeListener
and a label.DateTimePicker
(LocalDateTime initialDateTime) Convenience constructor to create a date time picker with a pre-selected date time in current UI locale format.
DateTimePicker
(LocalDateTime initialDateTime, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<DateTimePicker, LocalDateTime>> listener) Convenience constructor to create a date time picker with a pre-selected date time in current UI locale format and a
HasValue.ValueChangeListener
.DateTimePicker
(LocalDateTime initialDateTime, Locale locale) Convenience constructor to create a date time picker with pre-selected date time and locale setup.
-
Method Summary
Modifier and TypeMethodDescriptionvoid
addThemeName
(String themeName) Adds a theme name to this component.
void
addThemeNames
(String... themeNames) Adds one or more theme names to this component.
Enables the implementing components to notify changes in their validation status to the observers.
Gets the aria-label of the component.
Gets the aria-label suffix for the date picker.
Gets the internationalization object previously set for this component.
Gets the placeholder string of the date field.
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 this field.
Gets the Locale for this DateTimePicker
getMax()
Gets the maximum date and time in the date time picker.
getMin()
Gets the minimum date and time in the date time picker.
getStep()
Gets the step of the time picker.
Gets the aria-label suffix for the time picker.
Gets the placeholder string of the time field.
boolean
Get the state of
showWeekNumbers
property of the date picker.protected void
onAttach
(AttachEvent attachEvent) Called when the component is attached to a UI.
boolean
removeThemeName
(String themeName) Removes a theme name from this component.
void
removeThemeNames
(String... themeNames) Removes one or more theme names from component.
void
setAriaLabel
(String ariaLabel) Sets the aria-label for the component.
void
setAutoOpen
(boolean autoOpen) When auto open is enabled, the dropdown will open when the field is clicked.
void
setDateAriaLabel
(String dateLabel) Sets the aria-label suffix for the date picker.
void
Sets the internationalization properties for the date picker inside this component.
void
setDatePlaceholder
(String placeholder) Sets a placeholder string for the date field.
void
Sets the internationalization properties for this component.
void
Sets the label for this field.
void
Set the Locale for the DateTimePicker.
void
setManualValidation
(boolean enabled) Sets whether manual validation mode is enabled for the component.
void
setMax
(LocalDateTime max) Sets the maximum date and time in the date time picker.
void
setMin
(LocalDateTime min) Sets the minimum date and time in the date time picker.
void
setReadOnly
(boolean readOnly) Sets the read-only mode of this
HasValue
to given mode.void
Sets the
step
property of the time picker using duration.void
setThemeName
(String themeName) Sets the theme names of this component.
void
setThemeName
(String themeName, boolean set) Sets or removes the given theme name for this component.
void
setTimeAriaLabel
(String timeLabel) Sets the aria-label suffix for the time picker.
void
setTimePlaceholder
(String placeholder) Set a placeholder string for the time field.
void
setValue
(LocalDateTime value) Sets the selected date and time value of the component.
void
setWeekNumbersVisible
(boolean weekNumbersVisible) Show or hide the week numbers in the date picker.
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.HasAutoOpen
isAutoOpen
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.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
getThemeName, getThemeNames, hasThemeName
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, setErrorMessage, 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, isRequiredIndicatorVisible, setRequiredIndicatorVisible
-
Constructor Details
-
DateTimePicker
public DateTimePicker()Default constructor.
-
DateTimePicker
Convenience constructor to create a date time picker with a label.
Parameters:
label
- the label describing the date time pickerSee Also:
-
DateTimePicker
Convenience constructor to create a date time picker with a pre-selected date and time in current UI locale format and a label.
Parameters:
label
- the label describing the date time pickerinitialDateTime
- the pre-selected date time in the pickerSee Also:
-
DateTimePicker
Convenience constructor to create a date time picker with a pre-selected date time in current UI locale format.
Parameters:
initialDateTime
- the pre-selected date time in the picker -
DateTimePicker
public DateTimePicker(HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<DateTimePicker, LocalDateTime>> listener) Convenience constructor to create a date time picker with a
HasValue.ValueChangeListener
.Parameters:
listener
- the listener to receive value change eventsSee Also:
-
DateTimePicker
public DateTimePicker(String label, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<DateTimePicker, LocalDateTime>> listener) Convenience constructor to create a date time picker with a
HasValue.ValueChangeListener
and a label.Parameters:
label
- the label describing the date time pickerlistener
- the listener to receive value change eventsSee Also:
-
DateTimePicker
public DateTimePicker(LocalDateTime initialDateTime, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<DateTimePicker, LocalDateTime>> listener) Convenience constructor to create a date time picker with a pre-selected date time in current UI locale format and a
HasValue.ValueChangeListener
.Parameters:
initialDateTime
- the pre-selected date time in the pickerlistener
- the listener to receive value change eventsSee Also:
-
DateTimePicker
public DateTimePicker(String label, LocalDateTime initialDateTime, HasValue.ValueChangeListener<AbstractField.ComponentValueChangeEvent<DateTimePicker, LocalDateTime>> listener) Convenience constructor to create a date time picker with a pre-selected date and time in current UI locale format, a
HasValue.ValueChangeListener
and a label.Parameters:
label
- the label describing the date time pickerinitialDateTime
- the pre-selected date time in the pickerlistener
- the listener to receive value change eventsSee Also:
-
DateTimePicker
Convenience constructor to create a date time picker with pre-selected date time and locale setup.
Parameters:
initialDateTime
- the pre-selected date time in the pickerlocale
- the locale for the date time picker
-
-
Method Details
-
setValue
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 interfaceHasValue<AbstractField.ComponentValueChangeEvent<DateTimePicker,
LocalDateTime>, LocalDateTime> Overrides:
setValue
in classAbstractField<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 interfaceHasValue<AbstractField.ComponentValueChangeEvent<DateTimePicker,
LocalDateTime>, LocalDateTime> Specified by:
setReadOnly
in interfaceHasValueAndElement<AbstractField.ComponentValueChangeEvent<DateTimePicker,
LocalDateTime>, LocalDateTime> Parameters:
readOnly
- a boolean value specifying whether the component is put read-only mode or not -
setLabel
Sets the label for this field.
-
getLabel
Gets the label of this field.
-
setAriaLabel
Sets the aria-label for the component.
Parameters:
ariaLabel
- the value to set as aria-label -
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
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()
orgetLabel()
and this suffix.Parameters:
dateLabel
- the value to be used as a suffix in the date picker aria-label. -
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
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()
orgetLabel()
and this suffix.Parameters:
timeLabel
- the value to be used as a suffix in the time picker aria-label. -
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
Sets a placeholder string for the date field.
Parameters:
placeholder
- the String value to set -
getDatePlaceholder
Gets the placeholder string of the date field.
Returns:
the
placeholder
property of the date picker -
setTimePlaceholder
Set a placeholder string for the time field.
Parameters:
placeholder
- the String value to set -
getTimePlaceholder
Gets the placeholder string of the time field.
Returns:
the
placeholder
property of the time picker -
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.
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 setSee Also:
-
isWeekNumbersVisible
public boolean isWeekNumbersVisible()Get the state of
showWeekNumbers
property of the date picker.Returns:
the
showWeekNumbers
property from the date picker -
setLocale
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
Gets the Locale for this DateTimePicker
-
addThemeName
Adds a theme name to this component.
Specified by:
addThemeName
in interfaceHasTheme
Parameters:
themeName
- the theme name to add, notnull
-
removeThemeName
Removes a theme name from this component.
Specified by:
removeThemeName
in interfaceHasTheme
Parameters:
themeName
- the theme name to remove, notnull
Returns:
true
if the theme name was removed,false
if the theme list didn't contain the theme name -
setThemeName
Sets the theme names of this component. This method overwrites any previous set theme names.
Specified by:
setThemeName
in interfaceHasTheme
Parameters:
themeName
- a space-separated string of theme names to set, or empty string to remove all theme names -
setThemeName
Sets or removes the given theme name for this component.
Specified by:
setThemeName
in interfaceHasTheme
Parameters:
themeName
- the theme name to set or remove, notnull
set
-true
to set the theme name,false
to remove it -
addThemeNames
Adds one or more theme names to this component. Multiple theme names can be specified by using multiple parameters.
Specified by:
addThemeNames
in interfaceHasTheme
Parameters:
themeNames
- the theme name or theme names to be added to the component -
removeThemeNames
Removes one or more theme names from component. Multiple theme names can be specified by using multiple parameters.
Specified by:
removeThemeNames
in interfaceHasTheme
Parameters:
themeNames
- the theme name or theme names to be removed from the component -
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<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 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<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)
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 withHasValidationProperties.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
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, ornull
to remove any minimum constraints -
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
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, ornull
to remove any minimum constraints -
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
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
Sets the internationalization properties for the date picker inside this component.
Parameters:
i18n
- the i18n object, notnull
-
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
Sets the internationalization properties for this component.
Parameters:
i18n
- the internationalized properties, notnull
-
setAutoOpen
public void setAutoOpen(boolean autoOpen) When auto open is enabled, the dropdown will open when the field is clicked.
Specified by:
setAutoOpen
in interfaceHasAutoOpen
Parameters:
autoOpen
- Value for the auto open property, -
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.
-