Not able to give date value to the date picker in protractor

Question

I am using angular 4 with protractor 5.2.2 and cucumber 3.2.0 my HTML code is given below

<div _ngcontent-c2="" class="row">
                        <div _ngcontent-c2="" class="col-md-6">
                            <label _ngcontent-c2="" class="form-control-label frx-label" for="normal-field" id="lblDOB">
                                DOB </label>
                            <span _ngcontent-c2="">
                                <b _ngcontent-c2="">:</b>
                            </span>
                        </div>

                        <div _ngcontent-c2="" class="col-md-6">
                            <ng-datepicker _ngcontent-c2="" class="frx-ng2-date-picker ng-untouched ng-pristine ng-valid" _nghost-c3="" ng-reflect-options="[object Object]" ng-reflect-model="Fri Jan 12 2018 12:09:37 GMT+0"><div _ngcontent-c3="" class="ngx-datepicker-container"> <!--bindings={
"ng-reflect-ng-if": "true"
}--><input _ngcontent-c3="" class="ngx-datepicker-input ng-pristine ng-valid ng-touched" readonly="readonly" type="text" ng-reflect-model="01-12-2018">  <!--bindings={
 "ng-reflect-ng-if": "false"
}--> </div> </ng-datepicker>

                        </div>
                    </div>

i am not able to give a date value by using

element(by.css(".ngx-datepicker-container input")).sendKeys("08-02-1990");

but when i am try to click with this same element, the date picker popup will open. any idea?

Answer 1

Because the input set readonly="readonly", so you can't input any words by sendKeys.

Option 1) execute javascript to set the value of input:

var inputEle = element(by.css(".ngx-datepicker-container input"));
var inputValue = '08-02-1990';
browser.executeScript('arguments[0].value=arguments[1]', 
                      inputEle.getWebElement(), 
                      inputValue);
// Click on the input box of Date to make application can detect the changes
// on input
inputEle.click(); // open date picker pop-up <br>
inputEle.click(); // close date picker pop-up <br>

Option 2) execute javascript to change the Angular model

Precondition:
1. Your application is Angularjs App
2. You know the model name to store input value(please consult with developer if don't know)

I will use an example on https://angularjs.org/ to illustrate:

var modelEle = element(by.xxx) //elemnt binded the model name; 
// please find out which element binded the model name to store the date input by user
var modelName = '';

var modelValue = '08-02-1990';

var script = 'angular.element(arguments[0]).scope()' + 
             '.$apply(function(scope){scope[arguments[1]] = arguments[2]})';

browser.executeScript(script, 
                      modelEle.getWebElement(),
                      modelName,
                      modelValue);