Home » selenium-tutorial » How to select date from DatePicker calender

Newly Updated Posts

How to select date from DatePicker calender

Previous Topic, In this tutorial we will learn How to select date from DatePicker calender, date from date picker calendar step by step.

How to select date from DatePicker calender using selenium?

Date Picker in just a selection of date from calendar by selecting a number.

On selecting the number (date), the date appears as text field in DD/MM/YYYY format or other format defined in code.

select date from Date Picker Using Selenium

To understand date picker lets consider a scenario and code for date picker.

Complete Code for the above scenario:

public static void datePicker(String enterDate, WebDriver driver) throws ParseException {

Date current = new Date();
SimpleDateFormat dFormat = new SimpleDateFormat("d/MM/yyyy");
try {
Date dateToSelect = dFormat.parse(enterDate);

String day = new SimpleDateFormat("d").format(dateToSelect);
String month = new SimpleDateFormat("MMMM").format(dateToSelect);
String year = new SimpleDateFormat("yyyy").format(dateToSelect);

System.out.println(day + "     " + month + "     " + year + "      ");

String requiredMonth = month + " " + year;

System.out.println("Required month Year-------------" + requiredMonth);

WebElement clickDateField = driver.findElement(By.xpath("//input[@name='txtDate']"));
clickDateField.click();

Boolean flag = true;

while (flag) {

String monthoncalenderHeader = driver.findElement(By.xpath("//div[@class='ui-datepicker-title']"))
.getText();

if (requiredMonth.equalsIgnoreCase(monthoncalenderHeader)) {
					driver.findElement(By.xpath("//a[text()='" + day + "']")).click();

flag = false;

break;
} else {

if (dateToSelect.compareTo(current) > 0)

driver.findElement(By.xpath("//a[@data-handler='next']")).click();

else if (dateToSelect.compareTo(current) < 0)						driver.findElement(By.xpath("//a[@data-handler='prev']")).click();
				}
}
} catch (Exception e) {
e.printStackTrace();
}

}

To Call the method simply call datePicker(String date, driver); to any of the automation script, just simply pass date(in DD/MM/YYYY) format and driver instance as second parameter.

Explanation of above code line by line:

  • Firstly create the object of date class and assign in to DD/MM/YYYY format as below in code
Date current = new Date();
SimpleDateFormat dFormat = new SimpleDateFormat("d/MM/yyyy");
  • Under try catch block parse the date extract or bifurcate the date, month and year in a String from .format method also take the month and year in a string as the per the calender header in web application
Date dateToSelect = dFormat.parse(enterDate);

String day = new SimpleDateFormat("d").format(dateToSelect);
String month = new SimpleDateFormat("MMMM").format(dateToSelect);
String year = new SimpleDateFormat("yyyy").format(dateToSelect);

System.out.println(day + "          " + month + "     " + year + "         ");

String requiredMonth = month + " " + year;
  • Now click to the text field of calender, so that the calender get populated
WebElement clickDateField = driver.findElement(By.xpath("//input[@name='txtDate']"));
clickDateField.click();
  • Now open a while loop and create a condition on if statement that if the required month year is equal to the month year displayed in header of calendar in web application then click to the date on that window if not move to else condition
  • Under Else Condition if the required month year is greater that the month year present in the header displayed in the calendar on web application the click to next button, and if its less than click to previous button.
Boolean flag = true;
while (flag) {

String monthoncalenderHeader = driver.findElement(By.xpath("//div[@class='ui-datepicker-title']"))
.getText();

if (requiredMonth.equalsIgnoreCase(monthoncalenderHeader)) {				driver.findElement(By.xpath("//a[text()='" + day + "']")).click();

flag = false;

break;
} else {

if (dateToSelect.compareTo(current) > 0)					driver.findElement(By.xpath("//a[@data-handler='next']")).click();
else if (dateToSelect.compareTo(current) < 0)						driver.findElement(By.xpath("//a[@data-handler='prev']")).click();
}	
}

In the above tutorial, we have learned date picker in selenium, next we will learn advance topics in selenium webdriver