Unable to set date in HTML date picker using Selenium WebDriver

I’m facing an issue while trying to set a date in a date picker using Selenium. The date picker is implemented with an , and I’ve tried simulating user interaction by clicking on the date input field and sending keys for the date value, but it doesn’t seem to work.

<div class="col-4">
   <div class="form-group ">
    <label for="textDateOfBirth" class="fw-bold form-label">Date of birth <span class="text-danger">*</span></label>
 <input type="date" class="form-control is-invalid" id="textDateOfBirth" required="" onkeydown="return false" onchange="dateFieldValiation(textDateOfBirth,'^[0-9]{4}[-][0-9]{2}[-][0-9]{2}$','patient','dateofbirth');>
     </div>
 </div>

The above dateFieldValiation function validates the date input entered by the user in the date field. It checks if the value matches a specified regular expression pattern that enforces the format YYYY-MM-DD. If the entered date is valid, it sets the validated date value to the dateofbirth property of the patient object.

below is the Test method

@Test
    public void savePatient() {
        var patientPage = loginPage.loginToApp("Admin", "12345").clickPatientPage();
        patientPage.clickPatientForm();
        patientPage.selectPatientTitle("Mr");
        patientPage.setPatientFirstName("Marhoom");
        patientPage.setPatientLastName("Manga");

        patientPage.setPatientBOD("2001-10-15");

        patientPage.selectPatientGender(2);
        patientPage.setPatientContactNo("0777267756");
        patientPage.clickPatientSaveBtn();

    }

below is the setPatientBOD function

 public void setPatientBOD(String dateOfBirth){

        click(patientBOD);
        set(patientBOD, dateOfBirth);
        find(patientBOD).sendKeys(Keys.TAB);

    }

below is my basePage.java class

public class BasePage {

    public static WebDriver webDriver;

    public  void setWebDriver(WebDriver webDriver) {
        BasePage.webDriver = webDriver;
    }

    protected WebElement find(By locator){
        return webDriver.findElement(locator);
    }

    protected void set(By locator,String text){
        find(locator).clear();
        find(locator).sendKeys(text);
    }

    protected void click(By locator){
         find(locator).click();
    }
}

When I try to set the date using the setPatientBOD method, the value doesn’t get set in the date picker. Additionally, I cannot access the date picker element effectively using the browser’s inspection tool.

It’s worth noting that other fields in the form are being set correctly, which makes me think there might be a specific issue with how the date picker is being interacted with.

As a new learner in Selenium, I would appreciate any guidance or suggestions on how to interact with the HTML date picker properly and ensure the date value is set correctly. Thank you!

I attempted to set the date in the date picker using Selenium by clicking on the date input field and then sending the desired date value (in the format YYYY-MM-DD). Specifically, I called the setPatientBOD method with a valid date ("2001-10-15"). I expected the date picker to display the selected date and for the value to be set correctly in the date field.

However, despite executing these steps, the date value does not appear to be set in the date picker. Additionally, I am unable to effectively access the date picker element using the browser’s inspection tool, which complicates troubleshooting.