Select a date from date picker using Selenium webdriver

Question

I have a webpage with a textbox field  A calender icon near it  When i click on the calender icon a calender view is displayed  I think its not a jquery calender  Can anyone provide an example to automate this type of date pickers

User · Answer

here i show you my orignal code for automating jqueryui calender from its official site "https://jqueryui.com/resources/demos/datepicker/default.html".

copy paste the code and see it working like charm :)

vote up if you like it :) regards Avadh Goyal

public class JQueryDatePicker2 {
static int targetDay = 0, targetMonth = 0, targetYear = 0;

static int currenttDate = 0, currenttMonth = 0, currenttYear = 0;

static int jumMonthBy = 0;

static boolean increment = true;

public static void main(String[] args) throws InterruptedException {
    // TODO Auto-generated method stub
    String dateToSet = "16/12/2016";

    getCurrentDayMonth();
    System.out.println(currenttDate);
    System.out.println(currenttMonth);
    System.out.println(currenttYear);

    getTargetDayMonthYear(dateToSet);
    System.out.println(targetDay);
    System.out.println(targetMonth);
    System.out.println(targetYear);

    calculateToHowManyMonthToJump();
    System.out.println(jumMonthBy);
    System.out.println(increment);

    System.setProperty("webdriver.chrome.driver",
            "C:\\Users\\avadh.goyal\\Desktop\\selenium-2.52.0\\web driver\\chromedriver.exe");
    WebDriver driver = new ChromeDriver();
    driver.navigate().to(
            "https://jqueryui.com/resources/demos/datepicker/default.html");
    driver.manage().window().maximize();
    Thread.sleep(3000);

    driver.findElement(By.xpath("//*[@id='datepicker']")).click();

    for (int i = 0; i < jumMonthBy; i++) {
        if (increment) {
            driver.findElement(
                    By.xpath("//*[@id='ui-datepicker-div']/div/a[2]/span"))
                    .click();
        } else {
            driver.findElement(
                    By.xpath("//*[@id='ui-datepicker-div']/div/a[1]/span"))
                    .click();
        }
        Thread.sleep(1000);

    }

    driver.findElement(By.linkText(Integer.toString(targetDay))).click();

}

public static void getCurrentDayMonth() {

    Calendar cal = Calendar.getInstance();
    currenttDate = cal.get(Calendar.DAY_OF_MONTH);
    currenttMonth = cal.get(Calendar.MONTH) + 1;
    currenttYear = cal.get(Calendar.YEAR);
}

public static void getTargetDayMonthYear(String dateString) {
    int firstIndex = dateString.indexOf("/");
    int lastIndex = dateString.lastIndexOf("/");

    String day = dateString.substring(0, firstIndex);
    targetDay = Integer.parseInt(day);

    String month = dateString.substring(firstIndex + 1, lastIndex);
    targetMonth = Integer.parseInt(month);

    String year = dateString.substring(lastIndex + 1, dateString.length());
    targetYear = Integer.parseInt(year);

}

public static void calculateToHowManyMonthToJump() {

    if ((targetMonth - currenttMonth) > 0) {
        jumMonthBy = targetMonth - currenttMonth;

    } else {
        jumMonthBy = currenttMonth - targetMonth;
        increment = false;
    }
}

}

User · Answer

This one worked like a charm for me where the date picker just has previous and next buttons and Month and year as texts   Page objects are as follows       FindsBy How  How ClassName  Using    ui-datepicker-calendar        public IWebElement tblCalendar        FindsBy How   How XPath  Using      a  title   Prev           public IWebElement btnPrevious        FindsBy How   How XPath  Using      a  title   Next           public IWebElement btnNext        FindsBy How   How ClassName  Using    ui-datepicker-year        public IWebElement lblYear        FindsBy How   How ClassName  Using    ui-datepicker-month        public IWebElement lblMonth         public void SelectDateFromDatePicker string year  string month  string date                 while  year    lblYear Text                        if  int Parse year   lt  int Parse lblYear Text                                 btnPrevious Clicks                              else                               btnNext Clicks                                     while  lblMonth Text     January                         btnPrevious Clicks                       while  month    lblMonth Text                           btnNext Clicks                       IWebElement dateField   PropertiesCollection driver FindElement By XPath    a text        date                  dateField Clicks

User · Answer

Just do     JavascriptExecutor js    JavascriptExecutor driver    js executeScript  document getElementById  id   value  1988-01-01

User · Answer

Here s a tidy solution where you provide the target date as a Calendar object      Used to translate the Month value of a JQuery calendar to the month value expected by a Calendar  private static final Map lt String Integer gt  MONTH TO CALENDAR INDEX   new HashMap lt String Integer gt     static       MONTH TO CALENDAR INDEX put  January    0       MONTH TO CALENDAR INDEX put  February  1       MONTH TO CALENDAR INDEX put  March  2       MONTH TO CALENDAR INDEX put  April  3       MONTH TO CALENDAR INDEX put  May  4       MONTH TO CALENDAR INDEX put  June  5       MONTH TO CALENDAR INDEX put  July  6       MONTH TO CALENDAR INDEX put  August  7       MONTH TO CALENDAR INDEX put  September  8       MONTH TO CALENDAR INDEX put  October  9       MONTH TO CALENDAR INDEX put  November  10       MONTH TO CALENDAR INDEX put  December  11                                                                                                                                 setCalendarPicker                                                                                                                                         Sets the value of specified web element while assuming the element is a JQuery calendar              param byOpen The By phrase that locates the control that opens the JQuery calendar when clicked              param byPicker The By phrase that locates the JQuery calendar              param targetDate The target date that you want set              throws AssertionError if the method is unable to set the date                       public void setCalendarPicker By byOpen  By byPicker  Calendar targetDate                    Open the JQuery calendar              WebElement opener   driver findElement byOpen               opener click                    Locate the JQuery calendar              WebElement picker   driver findElement byPicker                   Calculate the target and current year-and-month as an integer where value   year 12 month                 The difference between the two is the number of months we have to move ahead or backward              int targetYearMonth   targetDate get Calendar YEAR    12   targetDate get Calendar MONTH               int currentYearMonth   Integer valueOf picker findElement By className  ui-datepicker-year    getText      12                       Integer valueOf MONTH TO CALENDAR INDEX get picker findElement By className  ui-datepicker-month    getText                     Calculate the number of months we need to move the JQuery calendar              int delta   targetYearMonth - currentYearMonth                 As a sanity check  let s not allow more than 10 years so that we don t inadvertently spin in a loop for zillions of months              if  Math abs delta   gt  120  throw new AssertionError  Target date is more than 10 years away                    Push the JQuery calendar forward or backward as appropriate              if  delta  gt  0                    while  delta--  gt  0  picker findElement By className  ui-icon-circle-triangle-e    click                  else if  delta  lt  0                    while  delta    lt  0  picker findElement By className  ui-icon-circle-triangle-w    click                                  Select the day within the month              String dayOfMonth   String valueOf targetDate get Calendar DAY OF MONTH                WebElement tableOfDays   picker findElement By cssSelector  tbody nth-child 2                  for  WebElement we   tableOfDays findElements By tagName  td                       if  dayOfMonth equals we getText                           we click                            Send a tab to completely leave this control   If the next control the user will access is another CalendarPicker                         the picker might not get selected properly if we stay on the current control                      opener sendKeys   t                         return                                               throw new AssertionError String format  Unable to select specified day

User · Answer

This code should work properly to get the current date from the calendar   String today getCurrentDay      function  driver findElement By xpath  here xpath of textbox    click    Thread sleep 5000   WebElement dateWidgetForm  driver findElement By xpath  here xpath of calender     List lt WebElement gt  columns   dateWidgetForm findElements By tagName  td          for  WebElement cell  columns          String z cell getAttribute  class   toString          if z equalsIgnoreCase  day           if  cell getText   equals today             cell click            break                 private String getCurrentDay      Calendar calendar   Calendar getInstance TimeZone getDefault        Get Current Day as a number  int todayInt   calendar get Calendar DAY OF MONTH    System out println  Today Int      todayInt    n        Integer to String Conversion  String todayStr   Integer toString todayInt    return todayStr

User · Answer

Please use this code for selecting date from Two Jquery calendar like Flight Booking site       Hashtable h new Hashtable        h put  January  0        h put  February  1       h put  March  2       h put  April  3       h put  May  4       h put  June  5       h put  July  6       h put  August  7       h put  September  8       h put  October  9       h put  November  10       h put  December  11         int expMonth      int expYear          Calendar Month and Year     String calMonth   null      String calYear   null      boolean dateNotFound      dateNotFound   true      expMonth  5      expYear   2014       while dateNotFound                 calMonth   driver findElement By className  ui-datepicker-month    getText       get the text of month         calYear   driver findElement By className  ui-datepicker-year    getText                if   Integer h get calMonth   1    expMonth  amp  amp   expYear    Integer parseInt calYear                          String block    div  class  monthBlock first   table tbody tr td       THIS IS FIRST CALENDAR             selectDate expDate block                dateNotFound   false                        parseInt - Converts String to integer and indexof  It will return the index position of String          else if   Integer h get calMonth   1  lt  expMonth  amp  amp   expYear    Integer parseInt calYear      expYear  gt  Integer parseInt calYear                         String block    div  class  monthBlock last   table tbody tr td      THIS IS SECOND CALENDAR                               selectDate expDate block      PASSING DATE AND CALENDAR                             dateNotFound   false     Otherwise it will rotate continuously                    else if  Integer h get calMonth  1  gt  expMonth  amp  amp   expYear    Integer parseInt calYear      expYear  lt  Integer parseInt calYear                         System out println   Please enter the date greater than Current date                dateNotFound   false                                Thread sleep 3000         public static void selectDate String date String block  throws IOException                            String monthblock block           List lt WebElement gt  dateWidget   driver findElements By xpath monthblock                 for  WebElement cell  dateWidget                          Selects Date             if  cell getText   equals date                                 cell findElement By linkText date   click                    break                                      Doubt   How to verify the expected results and how to sort the program            driver findElement By id  SearchBtn    submit               driver quit

User · Answer

It really depends on how it is coded but something like this may work   driver findElement By id  datepicker    click      click field driver findElement By linkText  Next    click      click next month driver findElement By linkText  28    click      click day

User · Answer

try this   http   seleniumcapsules blogspot com 2012 10 design-of-datepicker html   an icon used as a trigger  display a calendar when the icon is clicked  Previous Year button  lt  lt    optional  Next Year Button      optional  Previous Month button  lt    Next Month button     day buttons  Weekday indicators  Calendar title i e   September  2011  which representing current month and current year

User · Answer

WebDriver driver   public void launch         driver   new FirefoxDriver        driver get  http   www cleartrip com         driver manage   window   maximize        System out println  The browser launched successfully          public void clickdate String inputDate       WebElement ele  driver findElement By id  DepartDate         ele click        String month   driver findElement By xpath    div  class  monthBlock first   div 1   span 1     getText        String year   driver findElement By xpath    div  class  monthBlock first   div 1   span 2     getText        System out println  Application month     month     Year    year       int monthNum   getMonthNum month       System out println  Enum Num     monthNum       String   parts   inputDate split           int noOfHits     Integer parseInt parts 2  -Integer parseInt year   12   Integer parseInt parts 1  -monthNum       System out println  No OF Hits   noOfHits       for int i 0  i lt  noOfHits i         driver findElement By className  nextMonth     click              List lt WebElement gt  cals driver findElements By xpath    div  class  monthBlock first    tr         System out println cals size         for  WebElement daterow   cals       List lt WebElement gt  datenums   daterow findElements By xpath    td           iterating the  td  list       for WebElement date   datenums           Checking The our input Date if it match go inside and click       if date getText   equalsIgnoreCase parts 0         date click        break                                                                           public  int getMonthNum String month       for  Month mName   Month values          if mName name   equalsIgnoreCase month       return mName value            return -1         public enum Month      January 1   February 2   March 3   April 4   May 5   June 6    July 7   August 8   September 9   October 10   November 11  December 12       private int value       private Month int value        this value   value                 public static void main String   args            TODO Auto-generated method stub     Cleartrip cl new Cleartrip        cl launch        cl clickdate  24 11 2015

User · Answer

I tried this code  it may work for you also               DateFormat dateFormat2   new SimpleDateFormat  dd                 Date date2   new Date                 String today   dateFormat2 format date2                   find the calendar             WebElement dateWidget   driver findElement By id  dp-calendar                   List lt WebElement gt  columns dateWidget findElements By tagName  td                      comparing the text of cell with today s date and clicking it              for  WebElement cell   columns                               if  cell getText   equals today                                      cell click                      break

User · Answer

There is an argument for keeping it simple and stupid if the date picker comes from a simple html5 input and the goal is to test whatever events were added to the test  Consider for example     lt input type date name mydate   gt     and one wants to set a test where  mydate  is hardcoded to 02 22 2017  a solution with python is to use the following code  which is simple enough to debug to observe what it does   def setdate elem name  date str       elem   driver find element by name  mydate       elem click       elem send keys Keys ARROW LEFT      elem send keys Keys ARROW LEFT      elem send keys date str   setdate  mydate     02222017

User · Answer

You can handle in many ways in Selenium   You can use direct click operation to Select values  or  you can write general xpath to match all values from calender and click on specific date as per requirement   I have written detailed post on it   Hope it will help  http   learn-automation com handle-calender-in-selenium-webdriver

User · Answer

I think there will be different ways to select a Date for different Date picker formats  For a Date Picker where you need to select a year and month from a dropdown and then pick click a Date  I wrote the following code   private void setupDate WebDriver driver  String csvRow  throws Exception       String date      csvRow  split  -        driver findElement By id  flddateanchor    click        new Select driver findElement By              cssSelector  select ui-datepicker-year                  selectByVisibleText date 0        Thread sleep 1000       new Select driver findElement By              cssSelector  select ui-datepicker-month                  selectByVisibleText date 1        Thread sleep 1000       driver findElement By linkText date 2    click        Thread sleep 1000       I got the cssSelector part by the Selenium Firefox IDE  Also  my Date csvRow  is in  2015-03-31  format   Hope it helps

[testing] Select a date from date picker using Selenium webdriver

Examples related to testing

Examples related to selenium-webdriver

Examples related to automated-tests