Date Pickers

Introduction

Date Pickers are interactive calendar widgets that allow users to select dates conveniently instead of manually typing them into input fields. They are widely used across modern web applications for selecting dates related to bookings, registrations, payments, appointments, and reports.

Unlike regular textboxes, Date Pickers are usually implemented using JavaScript and custom UI components. Some date pickers allow users to type dates directly into the input field, while others require selecting dates from a calendar popup.

In Selenium, Date Pickers can be automated by entering values using send_keys(), clicking calendar widgets, selecting dates dynamically, or using JavaScript when required.

In this tutorial, you’ll learn how to handle Date Pickers using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.


What are Date Pickers?

A Date Picker is a calendar-based UI component that allows users to select dates easily.

Common examples include:

  • Date of Birth selection

  • Flight booking dates

  • Hotel reservation dates

  • Appointment scheduling

  • Payment dates

  • Report generation dates

Date Pickers may be implemented as:

  • Input fields with calendar widgets

  • Bootstrap Date Pickers

  • JavaScript calendars

  • Custom calendar components

  • Modern UI framework-based calendars

Some applications allow direct text input, while others require selecting dates from the calendar popup.


Why Automate Date Pickers?

Automating Date Pickers helps you:

  • Validate calendar functionality.

  • Test booking workflows.

  • Verify date validations.

  • Improve automation coverage.

  • Handle dynamic calendar components efficiently.


Common Methods Used

MethodPurpose
click()Opens the calendar widget
send_keys()Enters the date value
get_attribute()Retrieves the selected date
find_element()Locates calendar elements
execute_script()Handles custom date pickers when necessary
WebDriverWait()Synchronizes dynamically loaded calendars

Example

The following example opens the Date Picker, enters a date value, and verifies that the selected date is displayed successfully.

from selenium import webdriver
from selenium.webdriver.common.by import By


# Topic: 28. Tables and Calendars - Date Pickers
# Practice site: https://www.testmuai.com/selenium-playground/bootstrap-date-picker
# Run: pytest -s 28_examples/test_03_date_pickers.py
#
# Date pickers are custom widgets. Click the input to open the calendar, then
# select the desired date from the picker UI.


def test_date_pickers():
    driver = webdriver.Chrome()

    try:
        driver.get(
            "https://www.testmuai.com/selenium-playground/bootstrap-date-picker"
        )

        date_input = driver.find_element(
            By.ID,
            "birthday"
        )

        date_input.click()
        date_input.send_keys("07/12/2026")

        assert date_input.get_attribute("value") != ""

    finally:
        driver.quit()

Output

The date is entered successfully and displayed inside the Date Picker input field.

The Date Picker accepts the entered value successfully, and Selenium verifies that the selected date is present inside the input field.

Note: Some Date Pickers allow direct text input using send_keys(), while others require selecting the date from the calendar popup. The automation approach depends upon the application’s implementation.


Understanding the Code

Import the Required Classes

from selenium import webdriver
from selenium.webdriver.common.by import By

Imports:

  • webdriver for browser automation.

  • By for locating web elements.

Create the WebDriver

driver = webdriver.Chrome()

Launches a new Chrome browser session.

Open the Practice Website

driver.get(
    "https://www.testmuai.com/selenium-playground/bootstrap-date-picker"
)

Opens the webpage that contains the Bootstrap Date Picker component.

Locate the Date Picker Input Field

date_input = driver.find_element(
    By.ID,
    "birthday"
)

The Date Picker is located using its unique ID attribute.

Using IDs is generally preferred because they provide stable and maintainable locators.

Open the Calendar Widget

date_input.click()

Clicking the input field opens the Date Picker calendar component.

Depending upon the application’s implementation, the calendar may allow:

  • Manual text entry.

  • Date selection using the popup calendar.

  • Both approaches.

Enter the Date

date_input.send_keys(
    "07/12/2026"
)

This enters the following date into the input field:

07/12/2026

The format accepted by a Date Picker depends upon the application’s implementation.

Some common formats include:

  • DD/MM/YYYY

  • MM/DD/YYYY

  • YYYY-MM-DD

Always verify the expected format before automating Date Pickers.

Verify the Selected Date

assert date_input.get_attribute(
    "value"
) != ""

The get_attribute() method retrieves the value currently displayed inside the input field.

The assertion verifies that the Date Picker contains a value successfully.

Close the Browser

driver.quit()

Closes the browser and terminates the WebDriver session.

This is a recommended practice to ensure that browser resources are released properly after test execution.


Handling Different Types of Date Pickers

Modern web applications implement Date Pickers differently.

Some Date Pickers allow:

send_keys()

while others require:

  • Selecting years

  • Selecting months

  • Clicking calendar dates

Complex Date Pickers may require:

click()

operations for navigating between:

  • Months

  • Years

  • Calendar views

Always inspect the HTML structure before choosing an automation strategy.


Practical Example

Suppose an airline booking website allows users to select:

  • Departure Date

  • Return Date

The automation script:

  • Opens the calendar widget.

  • Selects the travel dates.

  • Verifies that the selected dates are displayed correctly.

  • Continues with the booking process.

This validates both the application’s functionality and user workflows.


Automation Testing Example

Consider an online banking application that generates account statements.

The user selects:

  • From Date

  • To Date

The automation script:

  • Selects both dates.

  • Generates the account statement.

  • Verifies that the correct transaction records are displayed.

Date Pickers are extremely common in enterprise-level applications that process date-based information.


Real-World Example

Date Pickers are commonly used in:

  • Banking applications

  • E-commerce websites

  • Healthcare portals

  • Airline booking systems

  • Hotel reservation systems

  • HR management systems

  • Enterprise web applications

They are particularly useful whenever users must select dates accurately and efficiently.


Advantages of Automating Date Pickers

  • Validates calendar functionality.

  • Supports date-based workflows.

  • Improves automation coverage.

  • Handles dynamic UI components.

  • Improves automation reliability.


Common Mistakes Beginners Make

Using Incorrect Date Formats

Many automation failures occur because the entered date format does not match the application’s requirements.

Always verify whether the application expects:

  • DD/MM/YYYY

  • MM/DD/YYYY

  • YYYY-MM-DD

before entering date values.

Ignoring Calendar Popups

Some Date Pickers do not allow:

send_keys()

In such cases, Selenium must interact with the calendar UI directly.

Using Fragile XPath Expressions

Prefer stable locators such as:

  • ID

  • Name

  • CSS Selector

Avoid unnecessarily complex XPath expressions whenever possible.

Ignoring Synchronization

Some calendar widgets load dynamically.

Use:

WebDriverWait()

when necessary before interacting with dynamically rendered calendar components.


Best Practices

  • Prefer stable locators such as ID and CSS Selector.

  • Verify the application’s expected date format.

  • Use send_keys() when direct text input is supported.

  • Use Explicit Wait for dynamically loaded calendars.

  • Validate the selected date after entering it.

  • Avoid hardcoding dates unless required by the test scenario.

  • Inspect the calendar implementation before selecting an automation strategy.


Conclusion

Date Pickers are among the most commonly used calendar components in modern web applications. Selenium provides multiple approaches for handling them depending upon their implementation. By combining stable locators, proper synchronization techniques, and appropriate validation strategies, you can build reliable and maintainable automation scripts for handling Date Pickers across enterprise applications.


Frequently Asked Questions (FAQs)

Can Selenium automate Date Pickers?

Yes.

Selenium can automate Date Pickers using:

  • send_keys()

  • click()

  • execute_script()

  • WebDriverWait()

depending upon the application’s implementation.

Which method is commonly used for Date Pickers?

If direct text input is supported:

send_keys()

is usually the simplest approach.

Can every Date Picker accept text input?

No.

Some Date Pickers require users to interact with the calendar popup instead of manually entering dates.

Are Date Pickers commonly automated in Selenium?

Yes.

They are extensively used across modern enterprise applications involving date-based workflows.

Why should I validate the selected date?

Validating the displayed value ensures that the correct date has been selected successfully.


Key Takeaways

  • Date Pickers are calendar-based UI components used for selecting dates.

  • Use send_keys() when direct text input is supported.

  • Some Date Pickers require interacting with calendar widgets dynamically.

  • Verify the application’s expected date format before entering values.

  • Prefer stable locators such as ID and CSS Selector.

  • Use Explicit Wait when calendars are rendered dynamically.

  • Proper synchronization significantly improves automation reliability when handling Date Pickers.