Question 196710 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to send date within an input date control with onkeydown="return false" using Selenium Python

I have this minimal html:

<!DOCTYPE html>
<html>
    <body>
        <input type="date" max="2023-03-09" value="2023-03-09" onkeydown="return false">
    </body>
</html>

That just asks for a date, but onkeydown="return false" prevents keyboard input. So I have to navigate the (I guess browser-generated) calendar, but don’t know how to access it. Even the calendar icon in the control is difficult to access. I have resorted to clicking with a fixed offset, but maybe there’s a better way.

My minimal python code is:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver import ActionChains
import time


driver = webdriver.Firefox()
driver.get("E:\Web\TestDate\public_html\index.html")
buttonDate = driver.find_element(By.TAG_NAME, "input")
action = ActionChains(driver)
w, h = buttonDate.size['width'], buttonDate.size['height']
x, y = buttonDate.location['x'], buttonDate.location['y']
wx, wy = driver.get_window_size()['width'], driver.get_window_size()['height']
action.move_to_element_with_offset(buttonDate, w - 10, h - 7)
action.click()
action.perform()
time.sleep(30)
driver.quit()

With that I can get the calendar control open, but cannot use send_keys() to change the date.

Tags:

4

Answers


  1. 0

    just remove the event handler

    driver.execute_script("document.querySelector('input[type="date"]').onkeydown = () => {}")

    Javascript code

    document.querySelector('input[type="date"]').onkeydown = () => {}

    full code such as

    from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver import ActionChains
import time


driver = webdriver.Firefox()
driver.get("E:\Web\TestDate\public_html\index.html")
buttonDate = driver.find_element(By.TAG_NAME, "input")

# Call Javascript Here.
driver.execute_script("document.querySelector('input[type="date"]').onkeydown = () => {}")

# Now send the keys here to the element
buttonDate.send_keys("20230629")

action = ActionChains(driver)

time.sleep(30)
driver.quit()

    Online Test via jsfiddle

    Login or Signup to reply.
  2. 0

    You can use Selenium’s execute_script method to run JavaScript and pass the text into the desired textbox. Refer the code below:

    date= "2023-03-09"
input_box = driver.find_element(By.XPATH, "//input[@type='date']")
driver.execute_script('arguments[0].value=arguments[1]', input_box, date)

    Note: This is like inserting the text into the web page from backend. This solution won’t imitate the human actions as selenium’s send_keys does.

    Login or Signup to reply.
  3. 0

    Given the HTML:

    <!DOCTYPE html>
<html>
    <body>
        <input type="date" max="2023-03-09" value="2023-03-09" onkeydown="return false">
    </body>
</html>

    To send a customized date you can use the removeAttribute() method to remove the onkeydown attribute and invoke send_keys() as follows:

    driver.get("file:///C:/Users/debanjan.bhattacharj/Desktop/My%20Documents/Selenium/date.html")
driver.execute_script("arguments[0].removeAttribute('onkeydown')", WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "input[type='date']"))))
driver.find_element(By.CSS_SELECTOR, "input[type='date']").send_keys("29062023")

    Browser snapshot:

    29062023

    References

    You can find a couple of relevant detailed discussions in:

    Login or Signup to reply.
  4. 0

    You can use the JS setAttribute() function to change the date directly:

    script = (
    """document.querySelector('%s').setAttribute('%s','%s');"""
    % ('input[type="date"]', "value", "2023-06-29")
)
driver.execute_script(script)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search