Date Picker

Set a time with the clock input, open the calendar, pick a day, and verify the readonly field matches `HH:MM - DD/MM/YYYY` (local calendar parts, stable for automation).

Intermediate

Scenario

Date bugs cost real money: timezone drift, off-by-one boundaries, locale formatting. The classic 'booking moves a day on save' incident usually traces back to client-side `new Date()` without a timezone.

Pick date & time

Time (24h)

Combined (local display)

Live widget · interact freely

Manual test checklist

1Pick day 15 and confirm the chip shows `HH:MM - 15/MM/YYYY` (DD/MM)
2Move the time spinner — combined string updates; day stays pinned
3Compare UTC vs Istanbul offset on the backend payload if one exists — QA signal for regressions
4Try midnight `00:00` vs `23:59` — two-digit HH:MM persists
5Re-open calendar → still same month/year grid; tapping another cell updates only the DD part

Expected result

Time (24h) + selected day compose into `HH:MM - DD/MM/YYYY`; adjusting time updates the binding without reopening the grid.

Automation challenge

Fill `date-time`, open the grid, hit `date-cell-15`, then assert `/^\\d{2}:\\d{2} - \\d{2}\\/\\d{2}\\/\\d{4}$/` on `date-input` and substring `DD=15`.

Stable selectors

Open calendar[data-testid="date-open"]
Time input (24h)[data-testid="date-time"]
Calendar cell 15[data-testid="date-cell-15"]
Combined display[data-testid="date-input"]

Locator strategy

Three levels from simple IDs to scoped Playwright locators. IDs and names are easy to learn but are not always the best long-term choice when labels change or components repeat.

Use simple IDs and names to understand how locating elements works.

await page.goto('https://lab.hakdogan.com/practice/date-picker');

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

Avoid as primary strategies

XPath (unless there is no alternative), long CSS chains, Tailwind-style utility class selectors, generated or unstable IDs, and volatile framework internals break when layout, styling, or DOM structure shifts.

1
2

await page.locator('.w-full.rounded-xl.border.bg-blue-500').fill('demo@example.com');
await page.locator('//div[2]/form/div[1]/input').fill('demo@example.com');

Reference Playwright spec

date-picker.spec.ts

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

test('date picker combined display', 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{2}:\d{2} - 15\/\d{2}\/\d{4}$/,
  );
});

Headed Test Playback

Simulated headed-browser flow — no real browser is launched.

Automation-style playback (Playwright-shaped logs). No real browser; no commands run on your machine.

Idledate-picker.spec.ts

Failure demos

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

playwright · headed · chromium0.00s

# awaiting Run Test · terminal scrolls automatically

Steps

Opening calendar
Choosing day 15
Asserting ISO date value