How to select the Date Picker In Selenium WebDriver

Question

Currently working on Selenium WebDriver and using Java. I want to select values in date range from the drop down.. I want to know how can I select the values as Date, Month and year in the date picker drop down.

Here is the HTML tag:

<dd id="date-element">
<input id="fromDate" class="hasDatepicker" type="text" style="width:57px; padding:3px 1px; font-size:11px;" readonly="readonly" name="fromDate" value="01 Jan 2013">

<input id="toDate" class="hasDatepicker" type="text" style="width:57px; padding:3px 1px; font-size:11px;" readonly="readonly" name="toDate" value="31 Dec 2013">  

The below sample code i tried:

Log.info("Clicking on From daterange dropdown");
JavascriptExecutor executor8 = (JavascriptExecutor)driver;
executor8.executeScript("document.getElementById('fromDate').style.display='block';");
Select select8 = new Select(driver.findElement(By.id("fromDate")));
select8.selectByVisibleText("10 Jan 2013");
Thread.sleep(3000);

Log.info("Clicking on To daterange dropdown");
JavascriptExecutor executor10 = (JavascriptExecutor)driver;
executor10.executeScript("document.getElementById('toDate').style.display='block';");
Select select10 = new Select(driver.findElement(By.id("toDate")));
select10.selectByVisibleText("31 Dec 2013");
Thread.sleep(3000);

Answer 1

DatePicker are not Select element. What your doing in your code is wrong.

Datepicker are in fact table with set of rows and columns.To select a date you just have to navigate to the cell where our desired date is present.

So your code should be like this:

WebElement dateWidget = driver.findElement(your locator);
List<WebElement> columns=dateWidget.findElements(By.tagName("td"));

for (WebElement cell: columns){
   //Select 13th Date 
   if (cell.getText().equals("13")){
      cell.findElement(By.linkText("13")).click();
      break;
 }

Answer 2

You can try this, see if it works for you.

Rather than choosing date from date picker, you can enable the date box using javascript & enter the required date, this would avoid excessive time required to traverse through all date elements till you reach one you require to select.

Code for from date

((JavascriptExecutor)driver).executeScript ("document.getElementById('fromDate').removeAttribute('readonly',0);"); // Enables the from date box

WebElement fromDateBox= driver.findElement(By.id("fromDate"));
fromDateBox.clear();
fromDateBox.sendKeys("8-Dec-2014"); //Enter date in required format

Code for to date

((JavascriptExecutor)driver).executeScript ("document.getElementById('toDate').removeAttribute('readonly',0);"); // Enables the from date box

WebElement toDateBox= driver.findElement(By.id("toDate"));
toDateBox.clear();
toDateBox.sendKeys("15-Dec-2014"); //Enter date in required format

Answer 3

You can directly use following javascript

((JavascriptExecutor)driver).executeScript("document.getElementById('fromDate').setAttribute('value','10 Jan 2013')")

Answer 4

I think this could be done in a much simpler way:

1. Find the locator for the Month (use Firebug/Firepath)
2. This is probably a Select element, use Selenium to select Month
3. Do the same for Year
4. Click by linkText "31" or whatever date you want to click

So code would look something like this:

WebElement month = driver.findElement(month combo locator);
Select monthCombo = new Select(month);
monthCombo.selectByVisibleText("March");

WebElement year = driver.findElement(year combo locator);
Select yearCombo = new Select(year);
yearCombo.selectByVisibleText("2015");

driver.click(By.linkText("31"));

This won't work if the date picker dropdowns are not Select, but most of the ones I've seen are individual elements (select, links, etc.)

Answer 5

try to SendKeys instead of picking the date

driver.FindElement(yourBy).SendKeys(yourDateTime.ToString("ddd, dd.MM.yyyy",CultureInfo.CreateSpecificCulture("en-US")));

If it does not work, try to send native 'tab'

element.SendKeys(OpenQA.Selenium.Keys.Tab);