How to select the date from Bootstrap Glyphicon date picker using Selenium and Java

Question

Below is my html DOM of my date picker.In this Input filed is non-editable.There is no other 'tr' 'td' tags in DOM for date picker.

 <form> <div class="input-group date" id="datetimepicker1"> <input type="text" id="accFromDateId" class="form-control" placeholder="DD/MMM/YYYY" data-i18n="BillsView.CustomerSearch.Placeholder.DateFormat"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div></form> 

This Input field is only taking the date from the date picker . I tried the below code. but it won't work

Selenium Script:

WebElement date=driver.findElement(By.name("accFromDateId"));
date.sendKeys("01232019"); 
date.submit();

Answer 1

1)Find by 'ID' should have been used instead of 'Name'

 var driver = new ChromeDriver();
 driver.Navigate().GoToUrl("demo.html");
 IWebElement date = driver.FindElement(By.Id("accFromDateId"));
 date.SendKeys("01232019");
 date.Submit();

2)The alternative approach would be to work with datepicker popup. Find a sample code below that picks jquery datepicker

var driver = new ChromeDriver();
driver.Navigate().GoToUrl("https://jqueryui.com/datepicker/");
driver.SwitchTo().Frame(driver.FindElement(By.XPath("//iframe[@class='demo-frame']")));
IWebElement date = driver.FindElement(By.Id("datepicker"));
date.Click();
driver.FindElementByLinkText("24").Click();

Answer 2

It is not clear from your question why you find Input filed also non-editable . To send a character sequence ie date as 25/JAN/2019 through the <input> tag you can use the following solution:

WebElement myDate = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='form-control' and @id='accFromDateId']")));
myDate.clear();
myDate.sendKeys("25/JAN/2019"); 
myDate.submit();