Selecting Date from the Datepicker. How do I do that using WATIR

Question

I don't know how to select the date from the date picker, For an example, If I want to select 1/5/2022, how would I do that?

here is the pic

Here is the Html

<div style="visibility: visible; overflow: visible; left: 589px; top: 193px; position: absolute;"
     class="gwt-PopupPanel">
    <div class="popupContent">
        <table class="gwt-DatePicker" cellspacing="0" cellpadding="0">
            <tbody>
            <tr>
                <td style="vertical-align: top;" align="left">
                    <table class="datePickerMonthSelector">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td width="1">
                                <div tabindex="0" class="datePickerPreviousButton" role="button" aria-pressed="false">
                                    <input type="text" tabindex="-1" aria-hidden="true"
                                           style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
                                    <div class="html-face">«</div>
                                </div>
                            </td>
                            <td width="1">
                                <div tabindex="0" class="datePickerPreviousButton" role="button" aria-pressed="false">
                                    <input type="text" tabindex="-1" aria-hidden="true"
                                           style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
                                    <div class="html-face">‹</div>
                                </div>
                            </td>
                            <td class="datePickerMonth" width="100%">Nov 2022</td>
                            <td width="1">
                                <div tabindex="0" class="datePickerNextButton datePickerNextButton-up" role="button"
                                     aria-pressed="false"><input type="text" tabindex="-1" aria-hidden="true"
                                                                 style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
                                    <div class="html-face">›</div>
                                </div>
                            </td>
                            <td width="1">
                                <div tabindex="0" class="datePickerNextButton datePickerNextButton-up" role="button"
                                     aria-pressed="false"><input type="text" tabindex="-1" aria-hidden="true"
                                                                 style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
                                    <div class="html-face">»</div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top;" align="left">
                    <table class="datePickerDays" cellspacing="0" cellpadding="0" border="0">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td class="datePickerWeekendLabel">S</td>
                            <td class="datePickerWeekdayLabel">M</td>
                            <td class="datePickerWeekdayLabel">T</td>
                            <td class="datePickerWeekdayLabel">W</td>
                            <td class="datePickerWeekdayLabel">T</td>
                            <td class="datePickerWeekdayLabel">F</td>
                            <td class="datePickerWeekendLabel">S</td>
                        </tr>
                        <tr>
                            <td>
                                <div tabindex="-1" aria-selected="false"
                                     class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">30
                                </div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
                                    31
                                </div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">1</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">2</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">3</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">4</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
                                    5
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
                                    6
                                </div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">7</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">8</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">9</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">10</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">11</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
                                    12
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
                                    13
                                </div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">14</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">15</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">16</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">17</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">18</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
                                    19
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
                                    20
                                </div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">21</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">22</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">23</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">24</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">25</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
                                    26
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
                                    27
                                </div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">28</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">29</div>
                            </td>
                            <td>
                                <div tabindex="0" aria-selected="false" class="datePickerDay ">30</div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
                                    1
                                </div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
                                    2
                                </div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false"
                                     class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">3
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div tabindex="-1" aria-selected="false"
                                     class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">4
                                </div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
                                    5
                                </div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
                                    6
                                </div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
                                    7
                                </div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
                                    8
                                </div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
                                    9
                                </div>
                            </td>
                            <td>
                                <div tabindex="-1" aria-selected="false"
                                     class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">10
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

I think the HTML shared only contains the day portion. Is there a part for the month/year selector? Do the `div` elements respond when using `#click` on them? — Justin Ko, Sep 23 '22 at 18:20
@JustinKo I have updated the full Date Picker. And which division you are asking about. — Rajagopalan, Sep 24 '22 at 05:33
I meant the `div` for the day numbers. I've made the assumption they are clickable in the answer below. — Justin Ko, Sep 24 '22 at 14:19

Justin Ko · Accepted Answer · 2022-09-25T13:44:11.787

1

The general approach needs to be:

Use the month previous/next buttons to select the month/year
Click the specific day (making sure to ignore the days for the previous/next month)

The code would look like:

# The day you would like to pick
target_date = Time.parse('1/5/2022')

# Pick the month/year (by determining how many months in the past/future you need to go)
current_date = Time.parse(browser.td(class: 'datePickerMonth').text)
months_to_increment = (target_date.year * 12 + target_date.month) - (current_date.year * 12 + current_date.month) # From https://stackoverflow.com/a/9428676/1200545
months_to_increment.abs.times do
    if months_to_increment > 0
        browser.div(class: 'datePickerNextButton', index: 0).click
    else
        browser.div(class: 'datePickerPreviousButton', index: 1).click
    end
end

# Pick the day (ignoring the datePickerDayIsFiller divs as they are the previous/next month)
browser.div(text: target_date.day.to_s, class: ['datePickerDay', '!datePickerDayIsFiller']).click

edited Sep 25 '22 at 13:44

answered Sep 24 '22 at 14:18

Justin Ko

46,526
5
91
101

Hi, Justin Ko, perfect solution. This part `text: target_date.day` is not accepting the integer, so I had to pass `target_date.day.to_s`, It works, it navigates the date to the specified date. But when I issue the click, the nothing is happening except that pop up is disappearing. But when I try to flash that date, it's flashing correctly. I put the debug point and ran it and that works too, so I put a sleep infront of that click but still it's not happening, Do you have any idea as to why the click towards the date is not bringing the date into the text box? – Rajagopalan Sep 25 '22 at 05:52
Maybe try clicking the parent `td` in case the click isn't bubbling up properly? Any chance this is a generic third party control that can tested somewhere? – Justin Ko Sep 25 '22 at 13:52
I tried that as well. I have written this code `b.div(text: target_date.day.to_s, class: ['datePickerDay', '!datePickerDayIsFiller']).parent.click` But this is not working as well. Oh no, this is private link. – Rajagopalan Sep 25 '22 at 14:04
Hi, Can I share my machine via team viewer? Can you have a look at it? – Rajagopalan Sep 25 '22 at 14:05
I accepted your answer! Thanks. Anyway your solution perfect, but something is a miss here. – Rajagopalan Sep 25 '22 at 14:23
Most developers don't build their own date controls; they'll use some third-party library. You should see if you can find out what that library is. – Justin Ko Sep 26 '22 at 01:00
Some other things you might try. (1) Try using `fire_event(:onclick)` instead of `click`. (2) Assuming this is a third-party library so you don't actually care to test the control, you could try setting the respective hidden form field instead. (3) I've had some controls that didn't respond until moused over first - you could try doing a `#hover`, `#focus` or `fire_event(:onmouseover)` before clicking. – Justin Ko Sep 26 '22 at 01:04
1

hey I am sorry, that click itself is working fine. What I did not notice here was, there was a loading while I was clicking that date. That's why It was not working. It works very fine. Thank you so much for your help. – Rajagopalan Sep 26 '22 at 04:26

Selecting Date from the Datepicker. How do I do that using WATIR

1 Answers1