Selenium WebDriver - Date Time Picker
Selenium Webdriver can be used to select date and time from a calendar. A Date Time Picker in a calendar can be designed in numerous ways on the web UI. Based on the UI, the test case needs to be designed.
What is a Date Time Picker?
The Date Time Picker is basically a user interface to create a calendar in the application under test. The functionality of a Date time picker is to select a particular date and/or time from a range.
How to Inspect a Date Time Picker?
To identify a calendar shown in the below image first we would click on the first input box under the Select Date field, and then right click on the web page, and finally click on the Inspect button in the Chrome browser. For investigating on a calendar on a page, click on the left upward arrow, available at the top of the HTML code as highlighted below.
Past Date Selection
Let us take the example of the Date Time Picker in the page below having the option to select year, month, day, hour, minutes, and so on. It also contains the option to select backdated or future date and time as well. Let's select a back dated date and time - 2023-06-04 09:05 in the morning, and then verify them.
Example
package org.example;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.concurrent.TimeUnit;
public class DatTimePickers {
public static void main(String[] args) throws InterruptedException {
// Initiate the Webdriver
WebDriver driver = new ChromeDriver();
// adding implicit wait of 20 secs
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
// URL launch for accessing calendar
driver.get("https://www.tutorialspoint.com/selenium/practice/date-picker.php");
// identify element to get calendar
WebElement f = driver
.findElement(By.xpath("//*[@id='datetimepicker2']"));
f.click();
// selecting month June
WebElement month = driver
.findElement(By.xpath("/html/body/div[3]/div[1]/div/div/select"));
Select select = new Select(month);
select.selectByVisibleText("June");
// getting selected month
String selectedMonth = select.getFirstSelectedOption().getText();
// selecting year 2023
WebElement year = driver.findElement(By.xpath("/html/body/div[3]/div[1]/div/div/div/input"));
// removing existing year then entering
year.clear();
year.sendKeys("2023");
// selecting day 4
WebElement day = driver.findElement(By.xpath("//span[contains(@aria-label,'"+selectedMonth+" 4')]"));
day.click();
// selecting AM time
WebElement time = driver.findElement(By.xpath("/html/body/div[3]/div[3]/span[2]"));
if (time.getText().equalsIgnoreCase("PM")){
time.click();
}
// selecting hour
WebElement hour = driver
.findElement(By.xpath("/html/body/div[3]/div[3]/div[1]/input"));
// removing existing hour then entering
hour.clear();
hour.sendKeys("9");
// selecting minutes
WebElement minutes = driver.findElement(By.xpath("/html/body/div[3]/div[3]/div[2]/input"));
// removing existing minutes then entering
minutes.clear();
minutes.sendKeys("5");
// reflecting both date and time
f.click();
// get date and time selected
String v = f.getAttribute("value");
System.out.println("Date and time selected by Date Time Picker: " + v);
// check date and time selected
if (v.equalsIgnoreCase("2023-06-04 09:05")){
System.out.print("Date and Time selected successfully");
} else {
System.out.print("Date and Time selected unsuccessfully");
}
// close browser
driver.quit();
}
}
Output
Date and time selected by Date Time Picker: 2023-06-04 09:05 Date and Time selected successfully Process finished with exit code 0
In the above example, we had selected the back dated date and time from the calendar using a Date Time Picker, and then verified if the proper date is selected in the console with the messages - Date and time selected by Date Time Picker: 2023-06-04 09:05 and Date and Time selected successfully.
Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.
Future Date Selection
Let us take another example of the Date Time Picker in the below page we would select a future dated date and time - 2025-06-04 21:05 in the evening, and then verify them.
Example
package org.example;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
import java.util.concurrent.TimeUnit;
public class DatTimePickersForward {
public static void main(String[] args) throws InterruptedException {
// Initiate the Webdriver
WebDriver driver = new ChromeDriver();
// adding implicit wait of 20 secs
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
// URL launch for accessing calendar
driver.get("https://www.tutorialspoint.com/selenium/practice/date-picker.php");
// identify element to get calendar
WebElement f = driver.findElement(By.xpath("//*[@id='datetimepicker2']"));
f.click();
// selecting month June
WebElement month = driver.findElement(By.xpath("/html/body/div[3]/div[1]/div/div/select"));
Select select = new Select(month);
select.selectByVisibleText("June");
// getting selected month
String selectedMonth = select.getFirstSelectedOption().getText();
// selecting year 2023
WebElement year = driver.findElement(By.xpath("/html/body/div[3]/div[1]/div/div/div/input"));
// removing existing year then entering
year.clear();
year.sendKeys("2025");
// selecting day 4
WebElement day = driver.findElement(By.xpath
("//span[contains(@aria-label,'"+selectedMonth+" 4')]"));
day.click();
// selecting PM time
WebElement time = driver.findElement(By.xpath("/html/body/div[3]/div[3]/span[2]"));
if (time.getText().equalsIgnoreCase("AM")){
time.click();
}
// selecting hour
WebElement hour = driver.findElement(By.xpath("/html/body/div[3]/div[3]/div[1]/input"));
// removing existing hour then entering
hour.clear();
hour.sendKeys("9");
// selecting minutes
WebElement minutes = driver.findElement(By.xpath("/html/body/div[3]/div[3]/div[2]/input"));
// removing existing minutes then entering
minutes.clear();
minutes.sendKeys("5");
// reflecting both date and time
f.click();
// get date and time selected
String v = f.getAttribute("value");
System.out.println("Date and time selected by Date Time Picker: " + v);
// check date and time selected
if (v.equalsIgnoreCase("2025-06-04 21:05")){
System.out.print("Date and Time selected successfully");
} else {
System.out.print("Date and Time selected unsuccessfully");
}
// close browser
driver.quit();
}
}
Output
Date and time selected by Date Time Picker: 2025-06-04 21:05 Date and Time selected successfully Process finished with exit code 0
In the above example, we had selected the future dated date and time from the calendar using a Date Time Picker, and then verified if the proper date is selected in the console with the messages - Date and time selected by Date Time Picker: 2025-06-04 21:05 and Date and Time selected successfully.
Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.
Current Date Selection
Let us take another example of the Date Time Picker in the below page we would select a current dated date and time and then verify them. Please note, in this Date Time Picker, the current date is selected by default, we would need to only select the current time.
Example
package org.example;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.concurrent.TimeUnit;
public class DateTimePickersCurrent {
public static void main(String[] args) throws InterruptedException {
// Initiate the Webdriver
WebDriver driver = new ChromeDriver();
// adding implicit wait of 20 secs
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
// URL launch for accessing calendar
driver.get("https://www.tutorialspoint.com/selenium/practice/date-picker.php");
// get current time
LocalDateTime l = LocalDateTime.now();
DateTimeFormatter formatter =
DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm");
String dateTime = l.format(formatter);
String[] dtTime = dateTime.split(" ");
String time = dtTime[1];
String[] t = time.split(":");
String hour = t[0];
String minute = t[1];
// identify element to get calendar
WebElement f = driver.findElement(By.xpath("//*[@id='datetimepicker2']"));
f.click();
// selecting hour based on current
WebElement hours = driver.findElement(By.xpath("/html/body/div[3]/div[3]/div[1]/input"));
// removing existing hour then entering
hours.clear();
hours.sendKeys(hour);
// selecting minutes based on current minutes
WebElement minutes = driver.findElement(By.xpath("/html/body/div[3]/div[3]/div[2]/input"));
// removing existing minutes then entering
minutes.clear();
minutes.sendKeys(minute);
// reflecting both date and time
f.click();
// get date and time selected
String v = f.getAttribute("value");
System.out.println("Date and time selected by Date Time Picker: " + v);
// check date and time selected
if (v.equalsIgnoreCase(dateTime)){
System.out.print("Date and Time selected successfully");
} else {
System.out.print("Date and Time selected unsuccessfully");
}
// close browser
driver.quit();
}
}
Output
Date and time selected by Date Time Picker: 2024-03-13 13:29 Date and Time selected successfully Process finished with exit code 0
In the above example, we had selected the current date and time from the calendar using a Date Time Picker, and then verified if the proper date is selected in the console with the messages - Date and time selected by Date Time Picker: 2024-03-13 13:29 and Date and Time selected successfully.
Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.
Conclusion
This concludes our comprehensive take on the tutorial on Selenium Webdriver Date Time Picker. Weve started with describing what is a Date Time Picker, how to inspect it and examples to walk through how to select past, current, and present date and time with Selenium. This equips you with in-depth knowledge of the Date Time Picker in Selenium. It is wise to keep practicing what youve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.