How do you automate a date picker or calendar widget in Selenium?

Answer

Automating Date Picker / Calendar in Selenium

Date pickers vary widely — from simple text inputs to complex month/year navigation calendars. Here are strategies for each:

Type 1 — Simple Text Input (Easiest)

If the date field is a plain <input>, just send the date as text:

Java

WebElement dateField = driver.findElement(By.id("startDate"));
dateField.clear();
dateField.sendKeys("12/25/2025");

For HTML5 date inputs (type="date"):

Java

WebElement dateInput = driver.findElement(By.cssSelector("input[type='date']"));
// Format: yyyy-MM-dd for HTML5 date input
dateInput.sendKeys("2025-12-25");

Type 2 — Navigate Calendar UI

Java

// Click to open calendar
driver.findElement(By.cssSelector(".datepicker-input")).click();

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".calendar")));

// Navigate to the correct month
// Click Next arrow until we reach December 2025
while (!driver.findElement(By.cssSelector(".calendar-month-year")).getText().equals("December 2025")) {
    driver.findElement(By.cssSelector(".next-month-arrow")).click();
}

// Click the specific date
driver.findElement(
    By.xpath("//td[@class='calendar-day'][text()='25']")
).click();

Type 3 — Set Via JavaScript (Bypass Calendar UI)

Java

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

js.executeScript(
    "arguments[0].value = arguments[1];",
    dateInput, "2025-12-25"
);

// Trigger change event so the UI updates
js.executeScript(
    "arguments[0].dispatchEvent(new Event(''change''));", dateInput
);

Type 4 — Material UI / React DatePicker

Java

WebElement dateField = driver.findElement(By.cssSelector("input[placeholder='MM/DD/YYYY']"));
dateField.click();
dateField.sendKeys(Keys.CONTROL + "a"); // select all
dateField.sendKeys("12/25/2025");
dateField.sendKeys(Keys.TAB); // close picker

Decision Tree

Date Picker Type	Best Approach
Plain text input	`sendKeys("12/25/2025")`
HTML5 `input[type=date]`	`sendKeys("2025-12-25")`
Calendar navigation UI	Click arrows + click day
JS-controlled picker	`js.executeScript` + `dispatchEvent`
Material / React picker	`sendKeys` + `TAB` to close