Skip to main content

​
DateTimePickerElement

Playwright element wrapper for <vaadin-date-time-picker>. Composes a DatePickerElement and TimePickerElement and exposes helpers to interact using LocalDateTime.

​
Component Tag

vaadin-date-time-picker

​
Implements

  • HasInputFieldElement
  • HasValidationPropertiesElement
  • HasClearButtonElement
  • HasPlaceholderElement
  • HasThemeElement
  • FocusableElement
  • HasAriaLabelElement
  • HasEnabledElement
  • HasTooltipElement
  • HasLabelElement
  • HasHelperElement

​
Factory Methods

​
getByLabel (Page)

public static DateTimePickerElement getByLabel(Page page, String label)
Get the DateTimePickerElement by its label. Uses ARIA role COMBOBOX.
​
page
Page
required
The Playwright page
​
label
String
required
The accessible label of the field
Returns: The matching DateTimePickerElement

​
getByLabel (Locator)

public static DateTimePickerElement getByLabel(Locator locator, String label)
Get the DateTimePickerElement by its label within a given scope.
​
locator
Locator
required
The locator to search within
​
label
String
required
The accessible label of the field
Returns: The matching DateTimePickerElement

​
Constructor

​
DateTimePickerElement

public DateTimePickerElement(Locator locator)
Create a new DateTimePickerElement. Internally composes DatePickerElement and TimePickerElement.
​
locator
Locator
required
The locator for the <vaadin-date-time-picker> element

​
Methods

​
setValue (LocalDateTime)

public void setValue(LocalDateTime date)
Set the value using a LocalDateTime.
​
date
LocalDateTime
required
The date-time to set

​
setValue (String)

@Override
public void setValue(String value)
Set the value of the input.
​
value
String
required
Value formatted as in the view (dd/mm/yyyy hh:mm)

​
getValueAsLocalDateTime

public LocalDateTime getValueAsLocalDateTime()
Get the current value as a LocalDateTime. Returns: The parsed value or null when empty

​
setDate

public void setDate(String date)
Set only the date part (string input) and dispatch change events.
​
date
String
required
The date string to set

​
setTime

public void setTime(String date)
Set only the time part (string input) and dispatch change events.
​
date
String
required
The time string to set

​
assertValue (String)

@Override
public void assertValue(String value)
Assert that the input value equals the provided string.
​
value
String
required
Expected value formatted as in the view (dd/mm/yyyy hh:mm)

​
assertValue (LocalDateTime)

public void assertValue(LocalDateTime value)
Assert that the value equals the provided date-time.
​
value
LocalDateTime
Expected LocalDateTime or null for empty

​
assertDateValue

public void assertDateValue(String date)
Assert the date sub-field value equals the expected string.
​
date
String
required
Expected date string

​
assertTimeValue

public void assertTimeValue(String time)
Assert the time sub-field value equals the expected string.
​
time
String
required
Expected time string

​
getAriaLabel

@Override
public String getAriaLabel()
Get the ARIA label from the date picker sub-field. Returns: The ARIA label or null if not set

​
assertAriaLabel

@Override
public void assertAriaLabel(String ariaLabel)
Assert the ARIA label on both date and time sub-fields.
​
ariaLabel
String
required
Expected ARIA label

​
getFocusLocator

@Override
public Locator getFocusLocator()
Get the locator to use for focus operations. Returns: The date picker input locator

​
isEnabled

@Override
public boolean isEnabled()
Check whether both date and time pickers are enabled. Returns: true when both are enabled

​
assertEnabled

@Override
public void assertEnabled()
Assert that both date and time pickers are enabled.

​
assertDisabled

@Override
public void assertDisabled()
Assert that both date and time pickers are disabled.

​
Usage Examples

​
Basic DateTime Selection

DateTimePickerElement dateTimePicker = DateTimePickerElement.getByLabel(page, "Appointment date");
dateTimePicker.assertVisible();
dateTimePicker.assertHelperHasText("Enter the appointment date and time");

LocalDateTime testDate = LocalDateTime.of(2025, 9, 20, 10, 0);
dateTimePicker.setValue(testDate);
dateTimePicker.assertValue(testDate);

​
Setting Date and Time Separately

DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");
DateTimeFormatter timeFormatter = DateTimeFormatter.ofPattern("HH:mm");

DateTimePickerElement dateTimePicker = DateTimePickerElement.getByLabel(page, "Appointment date");
LocalDateTime testDate = LocalDateTime.of(2025, 9, 20, 10, 0);

dateTimePicker.setDate(dateFormatter.format(testDate));
dateTimePicker.setTime(timeFormatter.format(testDate));

dateTimePicker.assertDateValue(dateFormatter.format(testDate));
dateTimePicker.assertTimeValue(timeFormatter.format(testDate));
dateTimePicker.assertValue(testDate);

​
Validation on Incomplete Input

DateTimePickerElement dateTimePicker = DateTimePickerElement.getByLabel(page, "Appointment date");
DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");
DateTimeFormatter timeFormatter = DateTimeFormatter.ofPattern("HH:mm");

LocalDateTime testDate = LocalDateTime.of(2025, 9, 20, 10, 0);
dateTimePicker.setDate(dateFormatter.format(testDate));
dateTimePicker.setTime(timeFormatter.format(testDate));
dateTimePicker.assertValid();

// Clear time to make it incomplete
DateTimePickerElement secondPicker = DateTimePickerElement.getByLabel(page, "Vacation date");
secondPicker.focus();
dateTimePicker.setTime("");
dateTimePicker.assertInvalid();

​
Min/Max Validation

DateTimePickerElement datePicker = DateTimePickerElement.getByLabel(page, "Vacation date");
LocalDateTime startDate = LocalDateTime.of(2025, 9, 18, 14, 30);
LocalDateTime initialDate = startDate.plusDays(7);
LocalDateTime maxDate = startDate.plusDays(30);

datePicker.assertValue(initialDate);

// Valid date within bounds
LocalDateTime validDate = startDate.plusDays(15);
datePicker.setValue(validDate);
datePicker.assertValue(validDate);
datePicker.assertValid();

// Invalid date (after max)
LocalDateTime invalidDate = maxDate.plusDays(1);
datePicker.setValue(invalidDate);
datePicker.assertInvalid();
datePicker.assertErrorMessage("Maximum exceeded.");

// Invalid date (before min)
LocalDateTime anotherInvalidDate = startDate.minusDays(1);
datePicker.setValue(anotherInvalidDate);
datePicker.assertInvalid();
datePicker.assertErrorMessage("Minimum exceeded.");

// Set valid value again
datePicker.setValue(initialDate);
datePicker.assertValid();

​
Theme

DateTimePickerElement dateTimePicker = DateTimePickerElement.getByLabel(page, "Appointment date");
dateTimePicker.assertVisible();
dateTimePicker.assertTheme("small");

​
Focus

DateTimePickerElement dateTimePicker = DateTimePickerElement.getByLabel(page, "Appointment date");
DateTimePickerElement secondPicker = DateTimePickerElement.getByLabel(page, "Vacation date");

dateTimePicker.assertIsFocused();
secondPicker.assertIsNotFocused();
secondPicker.focus();
secondPicker.assertIsFocused();
dateTimePicker.assertIsNotFocused();

​
ARIA Label

DateTimePickerElement dateTimePicker = DateTimePickerElement.getByLabel(page, "Invisible label");
dateTimePicker.assertVisible();
dateTimePicker.assertAriaLabel("Invisible label");

​
Enabled/Disabled

DateTimePickerElement dateTimePicker = DateTimePickerElement.getByLabel(page, "Enabled/Disabled Field");
dateTimePicker.assertDisabled();

page.locator("#enable-disable-button").click();

dateTimePicker.assertEnabled();

​
Tooltip

DateTimePickerElement dateTimePicker = DateTimePickerElement.getByLabel(page, "Appointment date");
dateTimePicker.assertVisible();
dateTimePicker.assertTooltipHasText("Tooltip for datetimepicker");

Build docs developers (and LLMs) love

Get started for freeTalk to us