How to Handle Date Pickers/Calendars in playwright

 In this example we will explore how to handle date picker and calendar dropdown option in playwright with some example. Handling date pickers or calendars in Playwright depends on how the date picker is implemented in your web application. Here’s a general guide to handle both native HTML date inputs and custom calendar widgets.

NOTE :

1. Always check the format expected by the picker (e.g., YYYY-MM-DD, MM/DD/YYYY).
2. Wait for animations or calendar popups before clicking.
3. Use page.waitForSelector() if the calendar loads asynchronously.

Working with date picker in playwright

If the date picker is a text input field, you can directly set the date using Playwright's fill or type methods.

• Ensure the date format matches the expected input (e.g., YYYY-MM-DD for <input type="date">).
• Use page.locator for more precise targeting if the input has a specific ID or class.

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

test('Work with date picker example - 1', async ({ page }) => {    
    await page.goto('https://practice.expandtesting.com/inputs');    
    await page.locator('#input-date').fill("1990-11-10");
    await expect(page.locator('#input-date')).toHaveValue("1990-11-10");    
});

test('Work with date picker example - 2', async ({ page }) => {    
    await page.goto('https://demoqa.com/automation-practice-form');    
    await page.locator('#dateOfBirthInput').fill("1990-11-10");
    await expect(page.locator('#dateOfBirthInput')).toHaveValue("1990-11-10");   
    await page.waitForTimeout(5000); 
});

Working with Interactive Calendar Date Pickers

you need to follow the below steps in order to handle interactive calendar date picker drop down in playwright.

1. Open the calendar: Click the input field or a button that triggers the calendar.
2. Navigate months/years: Use loops to click "next" or "previous" buttons until the desired month/year is displayed. Check the current month/year using a text-based locator.
3. Select the day: Use a selector to click the specific day (e.g., XPath or CSS based on the day’s text or attributes).

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com'); // Replace with your website
  
  // Open the date picker
  await page.click('#date-input'); // Replace with the input field's selector
  
  // Navigate to the desired month/year (if necessary)
  while (await page.locator('.month-year').textContent() !== 'May 2025') {
    await page.click('.next-month-button'); // Replace with the "next" button selector
  }
  
  // Select the day
  await page.click('//div[contains(@class, "day") and text()="12"]'); // Replace with the day selector
  
  await browser.close();
})();

This is all about how to handle date picker and interactive calendar in playwright with simple example.