Selenium Java: Unable to Select Date from Date Picker
Question
I tried to select a date from custom date picker but it does not work.
The HTML is pasted as below along with the screenshot of how it looks.
HTML:
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-3" style="position: absolute; top: 546px; left: 331px; z-index: 1; display: block; width: 51em;">
<div class="ui-datepicker-group ui-datepicker-group-first">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
<div class="ui-datepicker-title">
<select class="ui-datepicker-month" data-handler="selectMonth" data-event="change">
<option value="0">Jan</option>
<option value="1" selected="selected">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
</select> <span class="ui-datepicker-year">2019</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">1</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">2</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">3</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">4</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">5</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">6</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">7</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">8</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">9</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">10</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">11</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">12</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">13</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">14</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">15</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">16</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">17</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">18</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">19</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">20</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">21</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">22</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">23</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">24</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">25</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">26</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">27</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2019"><a class="ui-state-default" href="#">28</a></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-middle">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix">
<div class="ui-datepicker-title"><span class="ui-datepicker-month">March</span> <span class="ui-datepicker-year">2019</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">1</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">2</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">3</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">4</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">5</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">6</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">7</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">8</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">9</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">10</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">11</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">12</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">13</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">14</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">15</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">16</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">17</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">18</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">19</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">20</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">21</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">22</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">23</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">24</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">25</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">26</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">27</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">28</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">29</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">30</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="2" data-year="2019"><a class="ui-state-default" href="#">31</a></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-last">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"><a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">April</span> <span class="ui-datepicker-year">2019</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default ui-state-active" href="#">1</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">2</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">3</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">4</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">5</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">6</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">7</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">8</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">9</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">10</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">11</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">12</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">13</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">14</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">15</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">16</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">17</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">18</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">19</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">20</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">21</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">22</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">23</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default" href="#">24</a></td>
<td class=" ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="3" data-year="2019"><a class="ui-state-default ui-state-highlight" href="#">25</a></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">26</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">27</span></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">28</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">29</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled "><span class="ui-state-default">30</span></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-row-break"></div>
</div>
I had tried as
WebElement dateWidget = driver.findElement(By.className("ui-state-default"));
List columns=(List) dateWidget.findElements(By.tagName("ui-state-default"));
for (WebElement cell: columns){
//Select 13th Date
if (cell.getText().equals("13")){
cell.findElement(By.linkText("13")).click();
break;
}
}
and even tried to wait command so that the locator is found but no success.
WebDriverWait(driver,100).until(ExpectedConditions.elementToBeClickable(By.cssSelector
both didn't work as it failed to recognize the element can someone help me with this. If possible can we even click the previous and next so that we can click some previous dates as well?
2 answers
solution1
1 ACCPTED 2019-04-25 07:40:19
You did mistake using By.tagName("ui-state-default") , ui-state-default is a class not tag and your code below find nothing:
WebElement dateWidget = driver.findElement(By.className("ui-state-default"));
List columns=(List) dateWidget.findElements(By.tagName("ui-state-default"));
Code below return a with text 13 in the first month:
driver.findElement(By.xpath("//div[@id='ui-datepicker-div']//a[.='13']")).click();
You can select last month if the date picker using findElements :
List<WebElement> dates = driver.findElements(By.xpath("//div[@id='ui-datepicker-div']//a[.='13']"));
dates.get(2).click();
Also you can use data-month attribute:
driver.findElement(By.xpath("//div[@id='ui-datepicker-div']//td[@data-month='3']/a[.='13']")).click();
solution2
0 2019-04-25 07:49:33
Using following xpath you can solve your problem easily without any hassle
//table[@class='ui-datepicker-calendar']//td[@data-month='2']//a[.='15']
Here i have select month 2 and date 15 to select the date. You can change data-month to select another.You can make it dynamic also.
I have tested this in chrome console and my automation script it working fine for me
To verify paste following code in chrome console and hit inter>
$x("//table[@class='ui-datepicker-calendar']//td[@data-month='2']//a[.='15']")
It will return the element of date 15 of second month.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Selenium Java Date Picker
How to select the date from Bootstrap Glyphicon date picker using Selenium and Java
How to select date from date picker ion selenium web driver?
Date Picker - selenium webdriver java
How to select the Date Picker In Selenium WebDriver
not able to select date from date picker
How to select today date & time(+15mins) from a date picker in selenium
how to select values from date-picker in Cucumber-java
selenium code for date picker
How to select a date from javascript popup calendar in selenium-java
Related Tags