Handling Calendar and Date Pickers in Selenium Java

When automating web applications using Selenium with Java, interacting with calendar or date picker elements can often be challenging. Unlike standard input fields or buttons, calendars are usually built with dynamic HTML, JavaScript, and various event-driven controls. As a result, testers need to apply smart strategies to locate and select dates, whether it’s a single date, a date range, or custom formats.

In this blog, we'll explore different ways to handle calendar and date picker components effectively using Selenium WebDriver in Java.

Understanding Date Pickers in Web Applications

Date pickers are UI elements that allow users to select a date from a calendar popup. They can be:

Native HTML5 date inputs (<input type="date">)

Custom JavaScript-based calendars (like jQuery UI, Bootstrap, or proprietary plugins)

Date range selectors with two calendar fields

The strategy to automate date selection depends on how the calendar is implemented.

Approach 1: Handling HTML5 Date Input

This is the simplest type of date picker. You can directly send the date string to the input field.

java

WebDriver driver = new ChromeDriver();

driver.get("https://example.com");

WebElement dateInput = driver.findElement(By.id("datePicker"));

dateInput.sendKeys("2025-06-25"); // Format: yyyy-MM-dd

Note: Make sure the format matches the expected input value.

Approach 2: Handling Custom Date Pickers

Most real-world applications use customized calendars. Here's a general approach to handle them:

Step 1: Click to open the calendar

java

WebElement calendarIcon = driver.findElement(By.id("calendarIcon"));

calendarIcon.click();

Step 2: Navigate to the desired month/year

Many calendars have next/prev buttons or dropdowns to change the month/year. Use a loop until the desired month/year appears.

java

while (true) {

    String monthYear = driver.findElement(By.className("month-label")).getText();

    if (monthYear.equals("June 2025")) {

        break;

    }

    driver.findElement(By.className("next-button")).click();

}

Step 3: Select the day

Once the desired month is displayed, locate the day cell and click on it.

java

List<WebElement> days = driver.findElements(By.className("day"));

for (WebElement day : days) {

    if (day.getText().equals("25")) {

        day.click();

        break;

    }

}

Handling Date Ranges

When dealing with date range pickers (e.g., "From" and "To" fields), you’ll need to:

Open the calendar for the "From" field and select a date.

Repeat the process for the "To" field.

java

WebElement fromDate = driver.findElement(By.id("fromDate"));

fromDate.click();

// Use date selection logic here

WebElement toDate = driver.findElement(By.id("toDate"));

toDate.click();

// Use date selection logic here

Best Practices

Use dynamic waits (WebDriverWait) instead of hard Thread.sleep() to wait for calendar to load.

Always validate the date format accepted by the input field.

Avoid brittle XPath selectors — use stable attributes like id, data-*, or class names when possible.

Modularize your code to reuse calendar selection logic across multiple test cases.

Conclusion

Handling calendar and date pickers in Selenium Java may seem complex at first due to their diverse implementations. However, by understanding the structure of the date picker and applying a logical approach to element identification and interaction, you can automate even the most dynamic calendar components effectively. With the right strategy and a bit of practice, date selection in Selenium becomes just another automation challenge you can confidently overcome.

Learn Selenium with Java Training

Read More: Parameterization in Selenium Java Using TestNG
Read More: Setting Up Log4j Logging in Selenium Java Projects
Read More: Handling Multiple Windows in Selenium WebDriver Java




Visit Our IHUB Talent Institute Hyderabad
Get Direction