Date Picker

A native date input, a native date-and-time input, and a custom calendar built from buttons – the custom one is what most real applications use.

Native date input Native date and time

Custom calendar

Practice tasks

Set the native date input with sendKeys / fill and assert its value.
Set the date-and-time input and assert both parts are stored.
Open the custom calendar, move two months forward and assert the month label changed.
Pick day 15 in the custom calendar and assert the input shows that date.
Assert the custom input is read-only, so typing into it does nothing.

Sample automation code

driver.findElement(By.id("date-input")).sendKeys("15-08-2026");   // format depends on the locale
Assert.assertEquals(driver.findElement(By.id("date-input")).getAttribute("value"), "2026-08-15");

driver.findElement(By.id("custom-date")).click();
driver.findElement(By.id("next-month")).click();
driver.findElement(By.xpath("//div[@id='cal-days']//button[text()='15']")).click();

await page.getByTestId('date-input').fill('2026-08-15');
await expect(page.getByTestId('date-input')).toHaveValue('2026-08-15');

await page.getByTestId('custom-date').click();
await page.getByTestId('next-month').click();
await page.locator('#cal-days button', { hasText: /^15$/ }).click();
await expect(page.getByTestId('custom-date')).not.toHaveValue('');