How to clear input with type=date using Protractor

Question

I am using protractor version 4.0.4 and am unable to clear an input when the type is set to date. It appears that Chrome is adding some special controls that are interfering a bit.

You can read more about what Chrome does with the date type here

https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

There is also a discussion of the issue on GitHub, but none of the suggestions seem to work for me.

https://github.com/angular/protractor/issues/562

Meanwhile I have tried the methods below
1) element.clear()

which results in an error stating "Element must be user-editable in order to clear it"

2) element.sendKeys(protractor.Key.BACK_SPACE)

which appears to cause the input to become selected (just the month portion) without anything actually being deleted

So is there some way to clear the date type input fields with Protractor that I am missing?

Answer 1

Sending the date alone with element.sendKeys is not reliable on a date input. It seems to first select the center before sending the keys. So you should also position the cursor with the LEFT and RIGHT keys.

To set the date 12/07/2016 :

var LEFT = Key.LEFT, RIGHT = Key.RIGHT, DELETE = Key.DELETE;

element.sendKeys(LEFT + LEFT + LEFT + "12072016")

And to clear the date :

var LEFT = Key.LEFT, RIGHT = Key.RIGHT, DELETE = Key.DELETE;

element.sendKeys(LEFT + LEFT + LEFT + DELETE + RIGHT + DELETE + RIGHT + DELETE)

Note that you may have to change the combination of the keys depending on the format of the date.

Another alternative to clear the date is to use some JavaScript, but be aware that it doesn't simulate the behavior of a real user:

browser.executeScript(function(elem) {
  elem.value = '';
  elem.dispatchEvent(new Event('change'));
}, element);