PlaywrightPHP

Pick a date from a date picker

Fill a native date input directly, or navigate a custom widget by role when there is no input.

There are two kinds of date picker. A native <input type="date"> takes a value directly, so you fill() it. A custom widget has no fillable input, so you open it and click the day by its role. Try the input first; it is faster and less brittle.

Fill a native date input

A native date input accepts a value in the HTML date format, YYYY-MM-DD, regardless of how the browser displays it to the user. Set that value with fill().

php
$page->goto('https://app.example.test/booking');

$page->getByLabel('Arrival date')->fill('2026-08-15');

The browser renders the value in the user's locale, but the value you set and read is always YYYY-MM-DD. Assert it in the same format.

php
expect($page->getByLabel('Arrival date'))->toHaveValue('2026-08-15');

Navigate a custom widget by role

When there is no native input, open the widget and click the day. A well-built date picker exposes its cells with the gridcell role and the month controls as buttons, so you can target them by accessible name.

php
$page->getByRole('button', ['name' => 'Choose date'])->click();

// Step to the right month if the widget does not open on it.
$page->getByRole('button', ['name' => 'Next month'])->click();

$page->getByRole('gridcell', ['name' => '15'])->click();

Role and name options go in an array. If two cells share a day number across months, scope to the visible grid or advance to the correct month first so only one 15 is present.

Assert the chosen date

Assert the value the field ends with, or the text the widget shows, not that the click happened.

php
expect($page->getByLabel('Arrival date'))->toHaveValue('2026-08-15');

Pitfalls

  • The value format for a native input is YYYY-MM-DD, not the displayed locale format. Filling 15/08/2026 into a native date input does not set the date.
  • A custom widget that repeats the same day number across months makes getByRole('gridcell', ['name' => '15']) ambiguous. Move to the target month first, or scope to the current grid.
  • Prefer the native input path. Navigating a widget by clicking through months is slower and breaks when the layout changes.

Expected result

The form stores the selected date in the expected format, or the custom widget shows the selected date text. Assert that final value instead of only asserting the day cell was clicked.

Go next

← All recipes