How to send dates to read-only calendar input boxes using Selenium webdriver?

Question

I want to specify the beg and end dates.

I can't change the default dates, because the input boxes are read only. Or, I have to select the dates from clicking the calendar. Don't know how to do that. Is there a way to send keys to read-only input boxes?

The sources of the two input boxes are as follows:

       <div class="date-from">
                <h3>From</h3>
                <input type="text" readonly="readonly" value="Jan 11, 2020">
                <button class="icon la-Calendar"></button>
            </div>

      <div class="date-to">
                        <h3>To</h3>
                        <input type="text" readonly="readonly" value="Jan 11, 2020">
                        <button class="icon la-Calendar"></button>
                    </div>

My following code gets the "Message: invalid element state" error. Thank you!

      browser.find_element_by_xpath('//*[@id="bpcg9kk"]/div/div[3]/div[1]/div[2]/div[1]/div[2]/div[1]/input').clear()
      browser.find_element_by_xpath('//*[@id="bpcg9kk"]/div/div[3]/div[1]/div[2]/div[1]/div[2]/div[1]/input').send_keys("Jan 01,2019")

[Update] Almost there. Using the following code. The beg-date is changed successfully. The end-date has an issue. The beg-date also ends up in the end-date box.

element = browser.find_element_by_xpath('//*[@id="bpcg9kk"]/div/div[3]/div[1]/div[2]/div[1]/div[2]/div[1]/input')
browser.execute_script("arguments[0].removeAttribute('readonly','readonly')",element)
element.clear()
element.send_keys("Jan 01, 2019")
time.sleep(5)

element2 = browser.find_element_by_xpath('//*[@id="bpcg9kk"]/div/div[3]/div[1]/div[2]/div[1]/div[2]/div[2]/input')
browser.execute_script("arguments[0].removeAttribute('readonly','readonly')",element2)
element2.clear()
element2.send_keys("Dec 31, 2019")

Problem with clearing the field. If you are not able to clear with clear(). You can try it with Action class — Muzzamil
– Muzzamil, Commented Jan 11, 2020 at 18:17

Muzzamil · Accepted Answer · 2020-01-11 18:35:56Z

3

You can use below lines instead send_keys to write date in date input field. Basically we directly changing value of element.

element= browser.find_element_by_xpath('//*[@id="bpcg9kk"]/div/div[3]/div[1]/div[2]/div[1]/div[2]/div[1]/input')

    browser.execute_script("arguments[0].setAttribute('value', ‘“Jan 01,2019"')", element);

    OR



    browser.execute_script(“arguments[0].value=arguments[1]", element, “Jan 01,2019”)

Another solution:

Make input field as editable by removing readonly attribute and then send keys as below

element= browser.find_element_by_xpath('//*[@id="bpcg9kk"]/div/div[3]/div[1]/div[2]/div[1]/div[2]/div[1]/input')


browser.execute_script("arguments[0].removeAttribute('readonly','readonly')",element)

element.send_keys("Jan 01,2019")

Clear field:

element2.send_keys(Keys.CONTROL + "a");
 element2.send_keys(Keys.DELETE);

edited Jan 11, 2020 at 18:35

answered Jan 11, 2020 at 16:43

Muzzamil

2,8812 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Victor Wang Over a year ago

Yes, I'm able to change the dates on the web page using your code. However, it seems that the new dates are not sent to the server, because the search results returned are still based on the default dates. Is there anything else I needs to do? Thanks.

Victor Wang Over a year ago

Do you know how to do that?

Muzzamil Over a year ago

I have updated my answer. Check the code under Another solution

Victor Wang Over a year ago

Almost there. The second input box for the end date is not changed successfully. Please see update in my question. Thanks a lot!

Victor Wang Over a year ago

Sorry, what's that?

|

Collectives™ on Stack Overflow

How to send dates to read-only calendar input boxes using Selenium webdriver?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related