How To Select Date In Selenium WebDriver From Calendar - JQuery Date Picker

You will find JQuery date picker In many software web applications. Selecting date from JQuery date picker Is not hard task but yes you need to use some logical steps to select expected date from date picker In selenium WebDriver software testing tool. You can not do It only using single statement. Earlier we have learnt how to work with different elements of JQuery and you can find all those tutorials links on THIS PAGE.
In bellow given webdriver software testing tool's example, Expected date, month and year are set Initially Inside @Test method. while loop Is used to navigate till expected month and year. When expected month and year set In date picker, selectDate function will be called to select date from date picker. More details description Is given In bellow example.

package Testing_Pack;

import java.util.Arrays;
import java.util.List;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

public class PickDate {
 WebDriver driver;
 WebElement datePicker;
 List<WebElement> noOfColumns;
 List<String> monthList = Arrays.asList("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
 // Expected Date, Month and Year
 int expMonth;
 int expYear;
 String expDate = null;
 // Calendar Month and Year
 String calMonth = null;
 String calYear = null;
 boolean dateNotFound;

 @BeforeTest
 public void start(){
     driver = new FirefoxDriver();
     driver.manage().window().maximize();
     driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
 }

 @Test
 public void pickExpDate() throws InterruptedException{

  driver.get("http://only-testing-blog.blogspot.com/2014/09/selectable.html");
  //Click on date text box to open date picker popup.
  driver.findElement(By.xpath("//input[@id='datepicker']")).click();
  dateNotFound = true;
  
  //Set your expected date, month and year.  
  expDate = "18";
  expMonth= 8;
  expYear = 2013;
  
  //This loop will be executed continuously till dateNotFound Is true.
  while(dateNotFound)
  { 
   //Retrieve current selected month name from date picker popup.
   calMonth = driver.findElement(By.className("ui-datepicker-month")).getText();
   //Retrieve current selected year name from date picker popup.
   calYear = driver.findElement(By.className("ui-datepicker-year")).getText();
   
   //If current selected month and year are same as expected month and year then go Inside this condition.
   if(monthList.indexOf(calMonth)+1 == expMonth && (expYear == Integer.parseInt(calYear)))
   {
    //Call selectDate function with date to select and set dateNotFound flag to false.
    selectDate(expDate);
    dateNotFound = false;
   }
   //If current selected month and year are less than expected month and year then go Inside this condition.
   else if(monthList.indexOf(calMonth)+1 < expMonth && (expYear == Integer.parseInt(calYear)) || expYear > Integer.parseInt(calYear))
   {
    //Click on next button of date picker.
    driver.findElement(By.xpath(".//*[@id='ui-datepicker-div']/div/a[2]/span")).click();
   }
   //If current selected month and year are greater than expected month and year then go Inside this condition.
   else if(monthList.indexOf(calMonth)+1 > expMonth && (expYear == Integer.parseInt(calYear)) || expYear < Integer.parseInt(calYear))
   {
    //Click on previous button of date picker.
    driver.findElement(By.xpath(".//*[@id='ui-datepicker-div']/div/a[1]/span")).click();
   }
  }
  Thread.sleep(3000);
 } 
 
 public void selectDate(String date)
 {
  datePicker = driver.findElement(By.id("ui-datepicker-div")); 
  noOfColumns=datePicker.findElements(By.tagName("td"));

  //Loop will rotate till expected date not found.
  for (WebElement cell: noOfColumns){
   //Select the date from date picker when condition match.
   if (cell.getText().equals(date)){
    cell.findElement(By.linkText(date)).click();
    break;
   }
  }
 } 
}

In above example, You can change values of expDate, expMonth and expYear variables to select any other date from date picker of software web application.

9 comments:

  1. Please can you explain how to find in Firefox this name for the object of the Next button ??
    //Click on next button of date picker.
    driver.findElement(By.xpath(".//*[@id='ui-datepicker-div']/div/a[2]/span")).click();

    I am seeing the Outer HTML as:
    class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">

    ReplyDelete
    Replies
    1. show me full HTML of element

      Delete
    2. That is XPath of of next button. You can find it using firebug and firepath addon of firefox. more detail on how to get xpath using firebug and firepath addon at -> http://software-testing-tutorials-automation.blogspot.in/2015/07/steps-to-get-element-xpathcss-using.html

      Delete
  2. HI Aravind ,this is cool!!!
    can u also please explain me how to iterate an DOB ?
    example i need to sign up a social media site with bunch of data then how do it achieve it (it should fill one user details and next take the other data and do the same but different DOB )
    Thanks in advance

    ReplyDelete
  3. Hi Aravind ,could you also explain me how to achieve DOB? Ex : Im trying to auto register a bunch of users including DOB , but DOB should be unique !!!
    and i am using csv file as an reader!!! could you please help me
    Thanks in advance !!!!

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hi,plz could u expalin
    how to iterate an DOB ?
    example i need to sign up a social media site with bunch of data then how do it achieve it (it should fill one user details and next take the other data and do the same but different DOB )

    ReplyDelete
  6. how to iterate an DOB ?
    example i need to sign up a social media site with bunch of data then how do it achieve it (it should fill one user details and next take the other data and do the same but different DOB )

    ReplyDelete
  7. Thanks,Above code is perfectly working

    ReplyDelete