Using Selenium on calendar date picker

Question

I am trying to pick a date (01/01/2011) from a calendar on this page. https://cotthosting.com/NYRocklandExternal/LandRecords/protected/SrchQuickName.aspx

The calendar is on the part of the form that says Date: FROM. When I click it, a calendar pops up for you to pick dates. However, the field also allows you type in a date. Given the complexity of calendars, I have chosen to use send_keys() but it is not working.

I have identified the empty field date field by its ID but for some reason it does not fill the form. when I try:

driver.find_element_by_id('ctl00_cphMain_SrchDates1_txtFiledFrom').send_keys("01012011")

Any ideas on how I can maneuver it differently? I'm using Python 2.7 with Selenium and ChromeDriver

Answer 1

To get this to work, add one extra step of clicking the element before sending the keys:

datefield = driver.find_element_by_id('ctl00_cphMain_SrchDates1_txtFiledFrom')
datefield.click()
datefield.send_keys("01012011")

Update:

It looks like you might have to use ActionChains after all in your case, which will allow you to chain a series of actions together, and then perform them one after the other:

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

driver = webdriver.Chrome()

driver.get("https://cotthosting.com/NYRocklandExternal/User/Login.aspx")
driver.find_element_by_id('ctl00_cphMain_blkLogin_btnGuestLogin').click()

driver.find_element_by_id('ctl00_cphMain_SrchNames1_txtFirmSurName').send_keys("Adam")

datefield = driver.find_element_by_id('ctl00_cphMain_SrchDates1_txtFiledFrom')

ActionChains(driver).move_to_element(datefield).click().send_keys('01012011').perform()
search_btn = driver.find_element_by_id('ctl00_cphMain_btnSearchAll')
ActionChains(driver).move_to_element(search_btn).click().click().perform()

I am not sure why two click() calls were necessary in this case, but it seems that they were. I tried a few other things including double_click(), but this was the only thing that worked for me to get the datefield unfocused and then click the search button.

Answer 2

An alternative solution with some explanation:

Solution

Similar to what is suggested here, do:

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

driver.get("https://cotthosting.com/NYRocklandExternal/LandRecords/protected/SrchQuickName.aspx")

# [Do whatever else is necessary...]

date_input = driver.find_element_by_id('ctl00_cphMain_SrchDates1_txtFiledFrom')
date_input.click()                      # Focus input field
date_input.send_keys(Keys.CONTROL, "a") # Select all pre-existing text/input value
date_input.send_keys(Keys.BACKSPACE)    # Remove that text
date_input.send_keys("01012011")        # Add desired text/set input value

What is going on

Here is a screenshot of devtools open to your page:

Two things stick out:

1. The input has value="From". So if you just call send_keys right away the input will have value From01012011.
2. Parenthetically, it appears that they set input to have type=text (it should really be type=date!)

So we have just ctrl-a, backspace to clear the value.