Python Selenium input date in ng datepicker

Question

I am trying to input a date into the text portion of a datepicker and send_keys is not working.

Here is the html:

<date-picker _ngcontent-bdp-c11="" _nghost-bdp-c3="">
    <div _ngcontent-bdp-c3="" class="datePicker formDiv-header datePickerContainer">
        <div _ngcontent-bdp-c3="" class="formLabel-header">
            <!---->
            <label _ngcontent-bdp-c3="" for="dateInput1">Search Date:</label>
            <!---->
        </div>
        <div _ngcontent-bdp-c3="" class="formField-header" style="padding:0;">
            <div _ngcontent-bdp-c3="" class="input-group date" id="dateTimePicker1">
                <input _ngcontent-bdp-c3="" class="form-control formField-header" maxlength="10" type="text">
                <span _ngcontent-bdp-c3="" class="input-group-addon"><span _ngcontent-bdp-c3="" class="glyphicon glyphicon-calendar">
                </span>
            </span>
        </div>
    </div>
</div>
</date-picker>
<search-button _ngcontent-bdp-c11="" _nghost-bdp-c4="">
    <button _ngcontent-bdp-c4="" class="selectionButton" type="button"> Search
</button></search-button>

Here is my code:

dateInputfield = driver.find_element_by_xpath('// *[ @ id = "dateTimePicker1"] / input')
# the dateInputfield:  <selenium.webdriver.remote.webelement.WebElement (session="6911b2bc422dac02d926b3b36429e8de", element="0.8362094047920967-3")>
dateInputfield.send_keys('01/15/2021')
searchbt = driver.find_element_by_xpath('//*[@id="filters"]/search-button/button')
searchbt.click()

Alternatively, I have tried to click the calendar icon, which actually opens the calendar for selection, but I don't know how to navigate to a given date in order to select it.

calicon = driver.find_element_by_xpath('//*[@id="dateTimePicker1"]/span/span')
calicon.click()

Any help would be appreciated.

Answer 1

To send the date characters to the element you can use either of the following Locator Strategies:

• Using css_selector:

  driver.find_element(By.CSS_SELECTOR, "div.input-group.date#dateTimePicker1 > input.form-control.formField-header").send_keys('01/15/2021')
  

• Using xpath:

  driver.find_element(By.XPATH, "//div[@class='input-group date' and @id='dateTimePicker1']/input[@class='form-control formField-header']").send_keys('01/15/2021')
  

---

Ideally, to send the date characters to the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

• Using CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.input-group.date#dateTimePicker1 > input.form-control.formField-header"))).send_keys('01/15/2021')
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='input-group date' and @id='dateTimePicker1']/input[@class='form-control formField-header']"))).send_keys('01/15/2021')
  

• Note: You have to add the following imports :

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC