Selecting Date from DatePicker in Selenium Webdriver

In this article, we will discuss how to automate the Date Picker in Selenium WebDriver.

What is DatePicker?

Selecting Date from DatePicker is an essential task in form inputs. The Datepicker is a standard form input field. To open an interactive calendar, we mainly focus on the input click or use the tab key. The selected date will be displayed in the input text box.

DatePicker Example:

1. Launch the Clear Trip website by using the following url: https://www.cleartrip.com/
2. Identify the Input Text box.
3. Give the Future Date to select the Depart on.

Selenium WebDriver Program

We will create our test case step by step to give you a complete understanding of how to select Date Picker in WebDriver.

Step 1: Launch the Eclipse IDE and create a New Project (DatePickerProgram)

Step 2: Right-Click on the “src” folder and create a new class from New > Class.

Give your Class name as “DatePicker” and click on the “Finish” button.

Step3. Let’s get to the coding part.

• To invoke the Firefox browser, we need to download the geckodriver.exe file and set the system property “Running the test on Firefox Browser” to the path of your GeckoDriver.exe file.

Here is the sample code to set system property for Firefox driver:

• After that, we have to initialize Firefox driver using GeckoDriver Class.

Here is the sample code to initialize Firefox driver using GeckoDriver class.

Combining both of the above code blocks, we will get the code snippet to launch the Firefox browser.

• After that, we need to write the code which will automate our test scenario (navigate to the desired URL).

Here is the sample code to navigate to the desired URL:

The complete code till now will look something like this:

import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.chrome.ChromeDriver;  
  
  
  
public class DatePicker {  
  
   public static void main(String[] args) {  
          
        // System Property for Firefox Driver   
System.setProperty("webdriver.gecko.driver","F:\\drivers\\geckodriver.exe");

        // Instantiate a FirefoxDriver class.      
     WebDriver driver = new FirefoxDriver();
    
        //Launch the Website
driver.get("http://cleartrip.com");
      
    }  
  
}  

Step4. Now we will try to identify the Input Text box.

Follow the steps given below to locate the Input Text box on the sample web page.

• Open URL: https://www.cleartrip.com/ 
• Give the Future Date to select the Depart on.

package DatePickerProgram;

import java.util.List;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class DatePicker {

public static void main(String[] args) throws InterruptedException {
String dot="10/June/2020";
String date,month,year;
String caldt,calmonth,calyear;
/*
* Spliting the String into String Array
*/
String dateArray[]= dot.split("/");
date=dateArray[0];
month=dateArray[1];
year=dateArray[2];

        // System Property for Firefox Driver   
System.setProperty("webdriver.gecko.driver","F:\\drivers\\geckodriver.exe");

        // Instantiate a FirefoxDriver class.      
     WebDriver driver = new FirefoxDriver();
    
        //Launch the Website
driver.get("http://cleartrip.com");
driver.findElement(By.id("DepartDate")).click();

WebElement cal;
cal=driver.findElement(By.className("calendar"));
calyear=driver.findElement(By.className("ui-datepicker-year")).getText();
/**
* Select the year
*/
while (!calyear.equals(year)) 
{
driver.findElement(By.className("nextMonth")).click();
calyear=driver.findElement(By.className("ui-datepicker-year")).getText();
System.out.println("The Displayed Year::" + calyear);
}

calmonth=driver.findElement(By.className("ui-datepicker-month")).getText();
/**
* Select the Month
*/
while (!calmonth.equalsIgnoreCase(month)) 
{
driver.findElement(By.className("nextMonth ")).click();
calmonth=driver.findElement(By.className("ui-datepicker-month")).getText();
}

cal=driver.findElement(By.className("calendar"));
/**
* Select the Date
*/
List<WebElement> rows,cols;
rows=cal.findElements(By.tagName("tr"));
for (int i = 1; i < rows.size(); i++) 
{
cols=rows.get(i).findElements(By.tagName("td"));
for (int k = 0; k < cols.size(); k++) 
{
caldt=cols.get(k).getText();
if (caldt.equals(date)) 
{
cols.get(k).click();
break;
}
}
}

}

}

The Output will be like as below: