How to Handle Date Pickers in Playwright with Examples

By AravindPlaywright Tutorial
Select date from date picker to handle date filling in Plywright

Date pickers are essential and one of the common UI components in modern web applications, but it is challenging to automate them effectively. In this guide, we will learn how to handle three common types of date pickers in Playwright automation.

In this article, we will learn how to select dates in native HTML5 date inputs, custom JavaScript date pickers, and third-party library implementations like Flatpickr, and verify the date value inside the input date field.

Why do you need to automate date pickers

Generally, you will find date pickers in:

  • Booking and reservation systems (hotels, flights, appointments)
  • Data filtering interfaces
  • Form inputs for birthdates, expiration dates, and schedules

These forms and filters use different types of date pickers, and you should know how to automate them in Playwright automation.

Handling Native HTML5 Date Pickers

Native date inputs are simple and easy to automate in Playwright. You can use the fill() method to type a date in it.

Example to pick a date in the native date picker

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

test('test', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');
  // Basic date fill to input date.
  await page.locator('input[type="date"]').fill('2023-05-15');
  //Verify date filled correct.
  const dateValue = await page.locator('#nativeDate').inputValue();
  expect(dateValue).toBe('2023-05-15');
});
code to select date from simple html date picker

Code Breakdown

  • In this example, we have filled the date using the fill() method.
  • For date verification, we have used the inputValue() method to get a date from the input field.
  • Next, we compared the actual and expected dates using the toBe() method.

Automating Custom JavaScript Date Pickers

It is challenging to handle custom JavaScript-based date pickers. First, you should try the fill() method if it works. If it doesn’t work, you can use the code given below to change the month and year, and select a date from the date picker.

Example to pick a date in the custom date picker

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

test('test', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');
  // Open the date picker
  await page.locator('#customDateInput').click();

  // Navigate to specific month
  while (await page.locator('#currentMonthYear').textContent() !== 'March 2025') {
  await page.locator('#prevMonthBtn').click();
  }

  // Select specific date
  await page.locator('.calendar-day:has-text("15")').click();
  await page.waitForTimeout(5000);

  // Verify date selection.
  const selectedDate = await page.locator('#customDateInput').inputValue();
  expect(selectedDate).toContain('3/15/2025');
});
code to select date from the custom date picker

Code Breakdown

In the example given above, we are looking to select 15th March 2025 from a custom JavaScript-based date picker.

  • We used a while loop to click the ‘Previous Month’ button until the displayed month and year were set to March 2025.
  • Once March 2025 is selected, we use the click() method to select the 15th date from the calendar.
  • Once the date was selected, we used the toContain() method to verify and compare the expected and actual dates.

Automate Third-Party Date Pickers (Flatpickr)

Some web pages use third-party date pickers, like Flatpickr. Although handling these can be complex, this example will help simplify the process.

Example to pick a date in the third-party date picker

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

test('test', async ({ page }) => {
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');
  //Click on date input field to open date picker.
  await page.locator('.flatpickr-input').click();  
  
  // Navigate to specific year.
  while (await page.getByRole('spinbutton', { name: 'Year' }).inputValue() !== '2027') {
    await page.locator('.arrowUp').click();
    await page.waitForTimeout(1000);
  }
  //Select specific month
  await page.getByLabel('Month').selectOption('September');
  await page.waitForTimeout(1000);

  //Select specific date
  await page.locator('.flatpickr-day:not(.flatpickr-disabled)')
    .filter({ hasText: '22' })
    .click();
  await page.waitForTimeout(1000);

  //Verify date filled correct.
  const selectedDate = await page.locator('.flatpickr-input').inputValue();
  expect(selectedDate).toContain('2027-09-22');
});
code to select date from the third party date picker

Code Breakdown

  • We used a while loop to navigate to the specific year.
  • We selected the specific month from the month drop-down list.
  • After selecting the year and month, we selected the desired date.

Final Thoughts

Selecting a date using the native HTML5 date picker is straightforward. However, handling custom or third-party date pickers in Playwright automation can be more complex. Always try using the fill() method first, as it’s the simplest approach. If fill() doesn’t work, consider using more reliable, picker-specific strategies tailored to each date picker implementation.

Leave a Reply

Your email address will not be published. Required fields are marked *