A Date Picker is a user-interface component that allows users to select a date from a calendar instead of manually entering the date. Date pickers are commonly used in flight booking, hotel reservation, appointment scheduling, registration forms, banking applications, e-commerce applications, report filters, insurance systems, and many other web applications.
In Selenium WebDriver automation, handling date pickers requires understanding how the calendar is implemented in the HTML DOM. A date picker may be a standard HTML <input type="date">, a custom calendar created with HTML and JavaScript, a date-range picker, a date-time picker, or a calendar component provided by a frontend framework.
Selenium training commonly covers WebDriver, locators, web elements, browser interactions, waits, dynamic elements, forms, dropdowns, TestNG, Page Object Model, and practical automation scenarios. Date Picker handling combines many of these Selenium concepts in one real-world automation task.
Course Resources: Selenium Training Course | Register for Course Demo
A date picker is a graphical calendar component that allows a user to choose a specific date. Instead of manually typing a date, the user can open a calendar, navigate between months or years, and select a day.
Click Date Field
↓
Calendar Opens
↓
Read Current Month/Year
↓
Navigate to Required Month/Year
↓
Select Required Day
↓
Date Appears in Input
↓
Verify Selected Date
Date selection is a common automation requirement because many business applications depend on dates.
| Type | Description |
|---|---|
| HTML Date Input | Uses the standard <input type="date"> element. |
| Custom Date Picker | A calendar created using buttons, divs, spans, tables, or other HTML elements. |
| JavaScript Date Picker | A calendar controlled by JavaScript or a UI library. |
| Month/Year Picker | Allows users to select a month and year. |
| Date Range Picker | Allows users to select a start date and an end date. |
| Date-Time Picker | Allows users to select both date and time. |
| Multi-Date Picker | Allows multiple dates to be selected. |
| Searchable Date Picker | Allows dates to be searched or typed manually. |
A basic HTML date input may look like this:
<input type="date" id="dob">This is different from a custom calendar because the browser provides the date-selection interface.
When the date picker is a standard input element, Selenium can interact directly with the input.
WebElement dateField = driver.findElement(
By.id("dob")
);
dateField.sendKeys("03/15/2026");
The accepted date format can depend on the browser and implementation, so the expected format should be verified for the application under test.
In some situations, JavaScript can be used to set the value of a standard date input.
WebElement dateField = driver.findElement(
By.id("dob")
);
JavascriptExecutor js =
(JavascriptExecutor) driver;
js.executeScript(
"arguments[0].value='2026-03-15';",
dateField
);
When using JavaScript, verify that the application's event handlers recognize the changed value correctly.
A custom date picker may contain separate controls for the previous month, next month, month name, year, and individual days.
<div class="datepicker">
<button class="previous">Previous</button>
<span class="month-year">March 2026</span>
<button class="next">Next</button>
<div class="days">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
In this situation, Selenium interacts with the individual elements instead of treating the entire calendar as one control.
Locate Date Field
↓
Click Date Field
↓
Wait for Calendar
↓
Read Month and Year
↓
Compare With Target
↓
Click Previous/Next
↓
Locate Target Day
↓
Click Target Day
↓
Verify Date
driver.findElement(
By.id("departureDate")
).click();
The click should open the calendar component.
Dynamic date pickers may take some time to become visible. Explicit waits are generally more reliable than arbitrary sleep statements.
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".datepicker")
)
);
Many date pickers display the currently selected month and year in a header.
WebElement monthYear = driver.findElement(
By.cssSelector(".month-year")
);
String displayedMonthYear =
monthYear.getText();
System.out.println(displayedMonthYear);
<div class="calendar-header">
<button class="prev"><</button>
<span class="month-year">
March 2026
</span>
<button class="next">></button>
</div>
WebElement nextButton = driver.findElement(
By.cssSelector(".next")
);
nextButton.click();
WebElement previousButton = driver.findElement(
By.cssSelector(".prev")
);
previousButton.click();
If the required date is in a future month, the next-month button can be clicked repeatedly until the target month and year are displayed.
while (!driver.findElement(
By.cssSelector(".month-year")
).getText().equals("June 2026")) {
driver.findElement(
By.cssSelector(".next")
).click();
}
If the application allows past dates, the previous-month button can be used.
while (!driver.findElement(
By.cssSelector(".month-year")
).getText().equals("January 2026")) {
driver.findElement(
By.cssSelector(".prev")
).click();
}
Selecting a day number without first validating the month and year can cause the wrong date to be selected. For example, a calendar may display days belonging to the previous or next month inside the current month's grid.
Current Display:
March 2026
Target:
March 15, 2026
Correct Process:
Verify March 2026
↓
Locate 15
↓
Select 15
Once the required month and year are displayed, locate the target day.
driver.findElement(
By.xpath("//button[normalize-space()='15']")
).click();
This approach should only be used when the day number is unique within the relevant calendar.
A locator such as //button[normalize-space()='15'] may match more than one element if the calendar contains dates from adjacent months.
A better strategy is to use a stable date attribute when the application provides one.
<button class="day"
data-date="2026-03-15">
15
</button>
Selenium can directly identify the exact date:
driver.findElement(
By.cssSelector(
".day[data-date='2026-03-15']"
)
).click();
driver.findElement(
By.xpath(
"//button[@data-date='2026-03-15']"
)
).click();
Accessible date pickers may expose the complete date through an ARIA attribute.
<button role="gridcell"
aria-label="March 15, 2026">
15
</button>
driver.findElement(
By.cssSelector(
"[aria-label='March 15, 2026']"
)
).click();
Some date pickers use an HTML table to represent the calendar.
<table class="calendar">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
driver.findElement(
By.xpath(
"//table[@class='calendar']//td[normalize-space()='15']"
)
).click();
Date pickers often disable dates that cannot be selected.
<button class="day disabled"
disabled>
10
</button>
The test should verify that disabled dates behave according to the application's requirements.
WebElement date = driver.findElement(
By.xpath(
"//button[normalize-space()='15' and not(@disabled)]"
)
);
date.click();
Booking and appointment systems frequently restrict past dates.
Past Dates
↓
Disabled
Today
↓
Available or Restricted
Future Dates
↓
Available
The exact behavior depends on the application requirements.
A typical future-date automation flow is:
Some calendars provide separate month and year selectors.
<select class="month">
<option>January</option>
<option>February</option>
</select>
<select class="year">
<option>2026</option>
<option>2027</option>
</select>
If these are actual HTML <select> elements, Selenium's Select class can be used.
Select month = new Select(
driver.findElement(By.cssSelector(".month"))
);
month.selectByVisibleText("June");
Select year = new Select(
driver.findElement(By.cssSelector(".year"))
);
year.selectByVisibleText("2026");
If the month control is not an actual HTML <select>, do not use Selenium's Select class.
driver.findElement(
By.id("monthDropdown")
).click();
driver.findElement(
By.xpath("//div[normalize-space()='June']")
).click();
driver.findElement(
By.id("yearDropdown")
).click();
driver.findElement(
By.xpath("//div[normalize-space()='2026']")
).click();
A date range picker allows users to select two dates, generally a start date and an end date.
Start Date → 10 June 2026
End Date → 15 June 2026
Date range pickers are common in travel websites, hotel booking systems, analytics dashboards, and reporting applications.
Open Calendar
↓
Select Start Date
↓
Select End Date
↓
Calendar Updates Range
↓
Verify Start Date
↓
Verify End Date
driver.findElement(
By.cssSelector(
".day[data-date='2026-06-10']"
)
).click();
driver.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
).click();
String startDate = driver.findElement(
By.id("startDate")
).getAttribute("value");
String endDate = driver.findElement(
By.id("endDate")
).getAttribute("value");
System.out.println(startDate);
System.out.println(endDate);
A date-time picker combines date selection with time selection.
Select Date
↓
Select Time
↓
Select AM/PM if required
↓
Confirm
driver.findElement(
By.id("dateField")
).click();
driver.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
).click();
driver.findElement(
By.id("timeField")
).click();
driver.findElement(
By.xpath("//div[normalize-space()='10:30 AM']")
).click();
Some date controls allow the user to type a date directly.
WebElement input = driver.findElement(
By.id("dateSearch")
);
input.clear();
input.sendKeys("06/15/2026");
| Format | Example |
|---|---|
| MM/dd/yyyy | 06/15/2026 |
| dd/MM/yyyy | 15/06/2026 |
| yyyy-MM-dd | 2026-06-15 |
| dd-MMM-yyyy | 15-Jun-2026 |
| MMM dd, yyyy | Jun 15, 2026 |
The automation script should use the format expected by the application.
Java's LocalDate class can be used to represent target dates in automation scripts.
import java.time.LocalDate;
LocalDate targetDate =
LocalDate.of(2026, 6, 15);
System.out.println(targetDate);
LocalDate today = LocalDate.now();
System.out.println(today);
LocalDate futureDate =
LocalDate.now().plusDays(10);
System.out.println(futureDate);
LocalDate futureDate =
LocalDate.now().plusMonths(2);
System.out.println(futureDate);
LocalDate previousDate =
LocalDate.now().minusDays(5);
System.out.println(previousDate);
LocalDate date =
LocalDate.of(2026, 6, 15);
int day = date.getDayOfMonth();
int month = date.getMonthValue();
int year = date.getYear();
System.out.println(day);
System.out.println(month);
System.out.println(year);
import java.time.format.DateTimeFormatter;
LocalDate date =
LocalDate.of(2026, 6, 15);
DateTimeFormatter formatter =
DateTimeFormatter.ofPattern("dd/MM/yyyy");
String formattedDate =
date.format(formatter);
System.out.println(formattedDate);
LocalDate targetDate =
LocalDate.of(2026, 6, 15);
String dateValue =
targetDate.toString();
driver.findElement(
By.cssSelector(
".day[data-date='" + dateValue + "']"
)
).click();
A dynamic date picker can change its DOM after every month navigation. This means previously stored WebElements may become invalid.
Open Calendar
↓
Click Next
↓
DOM Refreshes
↓
Old Elements Become Stale
↓
Locate New Elements
↓
Continue Automation
StaleElementReferenceException may occur when an element previously located by Selenium is removed or replaced in the DOM.
Date pickers commonly cause this problem because clicking next or previous month can rebuild the calendar.
Instead of keeping a WebElement reference throughout the entire navigation process, locate the element again after the calendar changes.
while (!driver.findElement(
By.cssSelector(".month-year")
).getText().equals("June 2026")) {
driver.findElement(
By.cssSelector(".next")
).click();
}
WebElement date = wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
);
date.click();
wait.until(
ExpectedConditions.textToBePresentInElementLocated(
By.cssSelector(".month-year"),
"June 2026"
)
);
Some date pickers animate when changing months. Clicking a date immediately after the navigation may fail if the calendar is still transitioning.
Wait for a specific calendar state, such as the target month being displayed, instead of relying on an arbitrary delay.
ElementClickInterceptedException can occur when an overlay, animation, popup, or another element blocks the date.
WebElement date = driver.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
);
((JavascriptExecutor) driver).executeScript(
"arguments[0].scrollIntoView({block:'center'});",
date
);
date.click();
WebElement date = driver.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
);
JavascriptExecutor js =
(JavascriptExecutor) driver;
js.executeScript(
"arguments[0].click();",
date
);
Normal WebDriver interaction should generally be preferred before using JavaScript as a fallback.
Some date pickers identify today's date using a CSS class or attribute.
<button class="day today"
data-date="2026-06-15">
15
</button>
driver.findElement(
By.cssSelector(".day.today")
).click();
WebElement today = driver.findElement(
By.cssSelector(".day.today")
);
String dateValue =
today.getAttribute("data-date");
System.out.println(dateValue);
After selecting a date, verify that the expected value appears in the input.
String actualDate = driver.findElement(
By.id("departureDate")
).getAttribute("value");
System.out.println(actualDate);
String actualDate = driver.findElement(
By.id("departureDate")
).getAttribute("value");
Assert.assertEquals(
actualDate,
"06/15/2026"
);
Flight booking applications commonly require departure and return dates.
Click Departure Date
↓
Open Calendar
↓
Navigate to Target Month
↓
Select Departure Date
↓
Click Return Date
↓
Select Return Date
↓
Verify Both Dates
↓
Search Flights
driver.findElement(
By.id("departureDate")
).click();
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-10']"
)
)
).click();
driver.findElement(
By.id("returnDate")
).click();
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();
Hotel booking applications generally require a check-in and check-out date.
Check-in → 10 June 2026
Check-out → 15 June 2026
The test should verify that both dates are selected correctly and that the resulting date range follows the application's validation rules.
Appointment systems may restrict dates based on availability.
Available Date
↓
Selectable
Unavailable Date
↓
Disabled
Past Date
↓
Restricted
<button class="day available"
data-date="2026-06-10">
10
</button>
driver.findElement(
By.cssSelector(
".day.available[data-date='2026-06-10']"
)
).click();
<button class="day unavailable"
disabled>
11
</button>
Negative testing should verify that the application prevents selection of unavailable dates.
A page may contain several date controls such as departure date, return date, start date, end date, or date-of-birth.
WebElement departure = driver.findElement(
By.id("departureDate")
);
WebElement returnDate = driver.findElement(
By.id("returnDate")
);
departure.click();
Use specific and scoped locators to avoid interacting with the wrong calendar.
WebElement calendar = driver.findElement(
By.id("departureCalendar")
);
calendar.findElement(
By.cssSelector(
".day[data-date='2026-06-10']"
)
).click();
Some applications display two months at the same time.
June 2026 July 2026
[Calendar 1] [Calendar 2]
The automation should identify the correct calendar by reading its month and year before selecting the day.
List<WebElement> calendars =
driver.findElements(
By.cssSelector(".calendar")
);
for (WebElement calendar : calendars) {
String header = calendar.findElement(
By.cssSelector(".month-year")
).getText();
System.out.println(header);
}
List<WebElement> calendars =
driver.findElements(
By.cssSelector(".calendar")
);
for (WebElement calendar : calendars) {
String header = calendar.findElement(
By.cssSelector(".month-year")
).getText();
if (header.equals("June 2026")) {
calendar.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
).click();
break;
}
}
Some date elements have dynamically generated IDs.
<button id="date-872341">15</button>Stable attributes such as data-date, aria-label, or meaningful classes are generally preferable.
driver.findElement(
By.xpath(
"//button[starts-with(@id,'date-') and normalize-space()='15']"
)
).click();
driver.findElement(
By.xpath(
"//button[contains(@id,'date-') and normalize-space()='15']"
)
).click();
Modern date pickers may use accessibility attributes to describe dates and selection states.
<button role="gridcell"
aria-label="June 15, 2026"
aria-selected="false">
15
</button>
String selected =
date.getAttribute("aria-selected");
if ("true".equals(selected)) {
System.out.println(
"Date is selected"
);
}
Some date pickers support keyboard controls such as arrow keys, Enter, Escape, Page Up, and Page Down.
WebElement dateField = driver.findElement(
By.id("dateField")
);
dateField.click();
dateField.sendKeys(Keys.ARROW_RIGHT);
dateField.sendKeys(Keys.ENTER);
dateField.sendKeys(Keys.ESCAPE);If the date picker exists inside an iframe, Selenium must switch into the iframe before interacting with its elements.
WebElement frame = driver.findElement(
By.cssSelector("iframe")
);
driver.switchTo().frame(frame);
driver.findElement(
By.id("dateField")
).click();
driver.switchTo().defaultContent();
WebElement modal = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".modal")
)
);
modal.findElement(
By.id("dateField")
).click();
modal.findElement(
By.cssSelector(
".day[data-date='2026-06-15']"
)
).click();
If the date picker is inside Shadow DOM, Selenium can obtain the shadow root and locate elements within it.
WebElement host = driver.findElement(
By.cssSelector("custom-date-picker")
);
SearchContext shadowRoot =
host.getShadowRoot();
shadowRoot.findElement(
By.cssSelector("input")
).click();
Previous and next controls may use icons inside buttons.
<button class="calendar-next">
<span class="icon-arrow-right"></span>
</button>
Prefer locating the clickable button rather than its nested icon.
driver.findElement(
By.cssSelector(".calendar-next")
).click();
| Locator | Usage |
|---|---|
| ID | Unique date field or calendar element |
| CSS Selector | Stable classes and attributes |
| XPath | Complex relationships and text-based selection |
| data-date | Exact date selection |
| aria-label | Accessible date representation |
| Role | Accessible calendar components |
If the application exposes an exact date through a stable attribute, it is generally preferable to selecting only by the visible day number.
By.cssSelector(
".day[data-date='2026-06-15']"
);
| Exception | Possible Cause |
|---|---|
| NoSuchElementException | Incorrect locator or element is not present. |
| TimeoutException | Required element did not appear within the wait period. |
| StaleElementReferenceException | Calendar DOM was refreshed. |
| ElementClickInterceptedException | Overlay or animation blocked the click. |
| ElementNotInteractableException | Element exists but cannot currently be interacted with. |
Verify the locator, calendar visibility, frame context, Shadow DOM context, and page state before interacting with the element.
Use an appropriate explicit wait and confirm that the expected calendar state actually occurs.
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".datepicker")
)
);
Re-locate the calendar element after navigation because the DOM may have changed.
driver.findElement(
By.cssSelector(".month-year")
).getText();
Wait for animations or overlays to finish before clicking the target date.
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();
Select class on custom calendar elements.data-date.1. Inspect HTML
↓
2. Identify Date Picker Type
↓
3. Locate Date Field
↓
4. Open Calendar
↓
5. Locate Month/Year
↓
6. Navigate to Target Month
↓
7. Locate Target Date
↓
8. Select Date
↓
9. Verify Date
↓
10. Continue Test
Scenario: Verify that a user can select 15 June 2026 from a custom date picker.
| Step | Action | Expected Result |
|---|---|---|
| 1 | Open application | Application loads successfully. |
| 2 | Click date field | Calendar opens. |
| 3 | Navigate to June 2026 | June 2026 is displayed. |
| 4 | Select June 15 | June 15 is selected. |
| 5 | Verify field | Expected date is displayed. |
import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;
public class DatePickerTest {
private WebDriver driver;
private WebDriverWait wait;
@BeforeMethod
public void setUp() {
driver = new ChromeDriver();
driver.manage().window().maximize();
wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
driver.get("https://example.com");
}
@Test
public void selectDate() {
driver.findElement(
By.id("departureDate")
).click();
wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".datepicker")
)
);
while (!driver.findElement(
By.cssSelector(".month-year")
).getText().equals("June 2026")) {
driver.findElement(
By.cssSelector(".next")
).click();
}
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();
String actualDate = driver.findElement(
By.id("departureDate")
).getAttribute("value");
Assert.assertEquals(
actualDate,
"06/15/2026"
);
}
@AfterMethod
public void tearDown() {
driver.quit();
}
}
public void selectDate(String date) {
By dateLocator = By.cssSelector(
".day[data-date='" + date + "']"
);
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
wait.until(
ExpectedConditions.elementToBeClickable(
dateLocator
)
).click();
}
selectDate("2026-06-15");public void selectDate(
By dateField,
String date) {
driver.findElement(dateField).click();
By dateLocator = By.cssSelector(
".day[data-date='" + date + "']"
);
WebDriverWait wait = new WebDriverWait(
driver,
Duration.ofSeconds(10)
);
wait.until(
ExpectedConditions.elementToBeClickable(
dateLocator
)
).click();
}
selectDate(
By.id("departureDate"),
"2026-06-15"
);
public class BookingPage {
private WebDriver driver;
private By departureDate =
By.id("departureDate");
private By nextMonth =
By.cssSelector(".next");
public BookingPage(WebDriver driver) {
this.driver = driver;
}
public void openDepartureCalendar() {
driver.findElement(
departureDate
).click();
}
public void nextMonth() {
driver.findElement(
nextMonth
).click();
}
public void selectDate(String date) {
By dateLocator = By.cssSelector(
".day[data-date='" + date + "']"
);
driver.findElement(
dateLocator
).click();
}
}
BookingPage bookingPage =
new BookingPage(driver);
bookingPage.openDepartureCalendar();
bookingPage.selectDate(
"2026-06-15"
);
Date picker automation should also test invalid scenarios.
A range picker may prevent an end date from being earlier than the start date.
Start Date = 20 June 2026
End Date = 15 June 2026
The application may display a validation message, prevent the selection, or apply another business rule.
WebElement error = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".date-error")
)
);
System.out.println(
error.getText()
);
Date picker functionality should be included in regression testing whenever calendar-related functionality changes. Regression tests can cover date navigation, date selection, disabled dates, range selection, validation, and form submission.
Different dates can be provided as test data.
String[] dates = {
"2026-06-10",
"2026-06-15",
"2026-07-01"
};
for (String date : dates) {
System.out.println(date);
}
Dates can be stored in Excel, CSV, JSON, databases, or other test-data sources and passed into a reusable date-selection method.
String testDate = "2026-06-15";
selectDate(
By.id("departureDate"),
testDate
);
Some applications load available dates dynamically from a backend API.
Open Calendar
↓
Application Requests Availability
↓
API Returns Available Dates
↓
Calendar Updates
↓
Available Dates Become Selectable
↓
Select Date
wait.until(
ExpectedConditions.invisibilityOfElementLocated(
By.cssSelector(".loading-spinner")
)
);
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();
When accessibility is part of the test requirements, automation can verify attributes such as:
| Approach | Example | Use |
|---|---|---|
| ID | By.id("dateField") | Unique date input |
| CSS Class | .datepicker | Calendar component |
| CSS Attribute | [data-date='2026-06-15'] | Exact date |
| XPath Text | //button[normalize-space()='15'] | Visible day |
| ARIA Label | [aria-label='June 15, 2026'] | Accessible date |
Project: Automate a hotel booking date range.
Requirement: Select check-in as 10 June 2026 and check-out as 15 June 2026.
driver.findElement(
By.id("checkIn")
).click();
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-10']"
)
)
).click();
driver.findElement(
By.id("checkOut")
).click();
wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector(
".day[data-date='2026-06-15']"
)
)
).click();
String checkIn = driver.findElement(
By.id("checkIn")
).getAttribute("value");
String checkOut = driver.findElement(
By.id("checkOut")
).getAttribute("value");
System.out.println(
"Check-in: " + checkIn
);
System.out.println(
"Check-out: " + checkOut
);
| Application | Date Picker Usage |
|---|---|
| Flight Booking | Departure and return dates |
| Hotel Booking | Check-in and check-out dates |
| Healthcare | Appointment dates |
| Banking | Transaction and statement dates |
| E-Commerce | Delivery dates |
| HR Systems | Joining and leave dates |
| Analytics | Report date ranges |
| Insurance | Policy dates |
| Education | Exam and enrollment dates |
A date picker is a UI component that allows users to select a date through a calendar interface. It can be implemented as a native HTML date input or as a custom JavaScript-based calendar.
Inspect the calendar DOM, click the date field, wait for the calendar, identify the displayed month and year, navigate to the target month, locate the required day, click it, and verify the selected value.
Open the calendar, compare the current month and year with the target month and year, navigate using the next-month control until the target month is displayed, and then select the required day.
Select the start date first and the end date second. Then verify that both dates are displayed correctly and that the range follows the application's validation rules.
Use explicit waits, re-locate elements after calendar navigation, and wait for the required month or target date to become available before interacting with it.
Do not rely only on the visible day number when duplicate dates can exist. Prefer an exact data-date attribute, accessible label, current-month class, or a calendar-scoped locator.
It can occur when the calendar DOM is refreshed after navigating between months. Previously located WebElements may no longer represent the current elements, so they should be located again.
The Selenium Select class can be used only with an actual HTML <select> element. A custom calendar made from divs, buttons, spans, or other elements should be handled using normal Selenium WebDriver interactions.
Read the value from the date input using getAttribute("value"), or inspect selected-state attributes such as a CSS class or aria-selected.
Identify disabled dates through attributes such as disabled, CSS classes, or ARIA states and verify that the application prevents invalid selection.
The Selenium Training Course covers Selenium WebDriver, locators, browser automation, web elements, waits, dynamic elements, forms, TestNG, automation frameworks, and practical testing concepts.
To enquire about the course or request a demo, visit Register for Course Demo.
Date Picker automation is an important Selenium WebDriver skill because dates are used extensively in real-world web applications. The correct automation strategy depends on how the date picker is implemented.
For a reliable test, first inspect the DOM and identify whether the control is a native HTML date input or a custom calendar. For custom calendars, open the calendar, identify the displayed month and year, navigate to the required month, locate the exact target date, select it, and verify the resulting value.
Dynamic date pickers should be synchronized using explicit waits, while calendar elements should be re-located after DOM updates to reduce stale-element failures. Stable locators such as data-date, accessible labels, IDs, and calendar-scoped selectors can make date-picker automation more maintainable.
With reusable utility methods, Java's date APIs, explicit waits, Page Object Model, proper validation, and positive and negative test scenarios, Selenium testers can automate date selection effectively across flight booking, hotel booking, appointment, banking, e-commerce, reporting, and other applications.
