How to select date of datepicker in protractor - protractor

Question

I am automating the application through protractor and as part of one testcase need to select the date, the date-picker definition is as below. I tried to select the date using sendkeys which is not working.
element(by.lid("new-transaction-doat-field)).sendKeys("24 Aug 2019");
Please help me in to select the date.
Note: lid is the custom attribute and to select the value by lid, create a custom attribute method in protractor

Answer 1

Two issues in your given code:
1) Should interact with a Input html element
2) sendKeys() can't interact with a readonly Input html element.
// because protractor not support invoke setAttribute api directly,
// need to using executeScript to inject DOM Javascript snippet into browser
// then execute the snippet in browser
browser.executeScript(
"arguments[0].setAttribute('value', arguments[1])",
element(by.css( '[lid="new-transaction-doat-field"] > span > input')).getWebElement(),
"24 Aug 2019"
)
Keep in mind, setAttribute() is not simulating user interact with web page from UI.
Please confirm it's acceptable from your test perspective.

Answer 2

I found the solution to select the date through datepicker where 'sendKeys' won't work as input is disabled. The solution is like how manually we will traverse through the calendar and select the date.
The code is as below:
this.selectDate = function (dateElement, dateValue, yearButton, arrowButton) {
var splitDate = dateValue.split('/');
var year = splitDate[2];
var month = splitDate[1];
var day = splitDate[0];
var monthName = getMonthName(month);
dateElement.click()
.then(() => yearButton.click())
.then(() => yearButton.click())
.then(() => selectYear(year, arrowButton))
.then(() => element(by.xpath("//span[text()='" + year + "']")).click())
.then(() => element(by.xpath("//span[text()='" + monthName + "']")).click())
.then(() => element(by.xpath("//span[text()='" + day + "']")).click());
};
async function selectYear(year, arrowButton) {
for(var i=0; i < 10; i++) {
var present = await element(by.xpath("//span[text()='" + year + "']")).isPresent()
if(present) {
break;
} else {
await arrowButton.click();
}
}
}
function takes inputs as dateElement, dateValue, yearButton - which is center button to traverse to years, arrowButton - previous or next button in the calendar
First script clicks on the year button in the center in the above image it is 'September 2019' , after that '2019' year calendar comes, it clicks on that again.
Then 2001 to 2019 calendar comes as below
if the year displays it clicks on that otherwise it clicks on 'previous' or 'next' button based on the date to select until it got displayed (looping for 10 times to search for the year, if not in 10 clicks throws error).
After year clicked, it clicks on month and day.

Answer 3

have you tried the .sendKeys() on the input?
element(by.model('dateModel')).sendKeys('dd mmm yyyy');