Select Date from dropdown datepicker using Selenium and Python

Question

I tried to select different date rather than default (current date). e.g the initial page pop up with shareholding date : 2023年02月01日, but I want to select different date say, 2022年12月23日 from the dropdown menu.

My environment is : Selenium 4.3.0 and Python 3.9.7, Chrome

Following is my code:

url = "https://www3.hkexnews.hk/sdw/search/mutualmarket.aspx?t=hk&t=hk&t=hk&t=hk"
driver = webdriver.Chrome()
driver.get(url)
select_element = driver.find_element(By.XPATH, "//input[@name='txtShareholdingDate']").click()
# The above pop up the required page with Date dropdown, tried different code to select the date but failed. My codes are:
action = ActionChains(select_element)
action.send_keys("2023",Keys.ARROW_DOWN)
action.send_keys("1",Keys.ARROW_DOWN)
action.send_keys("31",Keys.ARROW_DOWN)
action.send_keys(Keys.ENTER)
action.perform()
# AttributeError: 'NoneType' object has no attribute 'execute'
# Also tried
select = driver.find_element(By.ID, "txtShareholdingDate")
select.select_by_value("2023年01月31日")
driver.find_element(By.ID, 'btnSearch').click()

Error:

AttributeError: 'WebElement' object has no attribute 'select_by_value'

Any suggestions?

• AbiSaran: For the error - "AttributeError: 'WebElement' object has no attribute 'select_by_value'" - you have to modify the line like - select = Select(driver.find_element(By.ID, "txtShareholdingDate")) , and add the import - from selenium.webdriver.support.select import Select

Answer 1

The <input> element to select a date within the website is having the attribute readonly="readonly" set:

<input name="txtShareholdingDate" type="text" value="2023年02月01日" id="txtShareholdingDate" class="input-searchDate active" data-reset="2023年02月01日" readonly="readonly">

---

Solution

To select a date you need to remove the readonly attribute and set the value attribute to the new date as follows:

driver.get("https://www3.hkexnews.hk/sdw/search/mutualmarket.aspx?t=hk&t=hk&t=hk&t=hk")
element = driver.find_element(By.CSS_SELECTOR, "input#txtShareholdingDate")
driver.execute_script("arguments[0].removeAttribute('readonly')", element)
driver.execute_script("arguments[0].setAttribute('value', '2023/01/31')", element)
driver.find_element(By.CSS_SELECTOR, "input#btnSearch").click()

Browser snapshot:

date_select

Answer 2

select tag is not used in the HTML DOM for this dropdown. Hence select class cannot be used in this case.

driver.find_element(By.XPATH, "//input[@name='txtShareholdingDate']").click()

After the above line, just try the following code:

driver.find_element(By.XPATH, "//button[@data-value='2022']").click()
driver.find_element(By.XPATH, "//button[@data-value='11']").click()
driver.find_element(By.XPATH, "//button[@data-value='23']").click()
driver.find_element(By.ID, "btnSearch").click()

Above 4 lines will click on dropdown values 2022, 11, 23 and then clicks on Search button

• Ed T: Thanks Shawn, it works except interesting that "11" gives "12" instead , I also tried out other value "10" , it gives me "11" . Looks like the month value will have the month result +1.

Answer 3

You can also use javascript to set the dat without having to set the date by using ActionChains as you have. This is also much quicker and less error prone

newDate = "2023年01月18日"
dateElement = wait.until(EC.presence_of_element_located((By.XPATH,"//input[@name='txtShareholdingDate']")))
print(dateElement .get_attribute("value"))
driver.execute_script("arguments[0].setAttribute('value',arguments[1])", dateElement , newDate )

• undetected Selenium: Why do you need time.sleep(5) at the fag end of your code?
• Manish: Must be a copy paste issue from my ide. Updated
• undetected Selenium: Indented your code and removed the blank lines. Let me know if you disagree, then I will revert back the changes.