Date & Files

Date Picker

Intermediate

Pick a date

Live widget · interact freely

Manual test goal

Open the calendar, choose a future date, and verify the bound input reflects the ISO value.

Expected result

Clicking a calendar cell updates the input value to the YYYY-MM-DD ISO format and closes the popup.

Stable selectors

Open picker[data-testid="date-open"]
Calendar cell 15[data-testid="date-cell-15"]
Date input[data-testid="date-input"]

Reference Playwright spec

date-picker.spec.ts

import { test, expect } from '@playwright/test';

test('date picker writes ISO value into input', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/date-picker');

  await page.getByTestId('date-open').click();
  await page.getByTestId('date-cell-15').click();

  await expect(page.getByTestId('date-input')).toHaveValue(/\d{4}-\d{2}-15/);
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idledate-picker.spec.ts

https://lab.hakdogan.com/practice/date-picker

# console output will stream here