How to change date in Angular Material Datetime picker using Selenium Webdriver

Question

I want to be able to change the value of a Angular Material Datetime picker using Selenium Webdriver for test automation.

https://www.npmjs.com/package/@angular-material-components/datetime-picker

And I want to know if it can be done using something like Javascript only instead of writing complex code to select "manually" the year, month, etc.

Here's the main part of the HTML generated by Angular :

<mat-form-field ...>
   <input _ngcontent-omb-c17 class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-valid ng-touched" id="input_start-date_filter-events" matinput name="startDate" ng-reflect-ngx-mat-datetime-picker="[object Object]" ng-reflect-name="startDate" ng-reflect-model="Tue Jan 12 2021 08:29:00 GMT-0" ng-reflect-id="input_start-date_filter-events" ng-reflect-placeholder="Start date" ng-reflect-readonly="true" aria-haspopup="dialog" placeholder="Start date" aria-invalid="false" aria-required="false">
   <ngx-mat-datetime-picker _ngcontent-omb-c17 ng-reflect-show-seconds="false"></ngx-mat-datetime-picker>
   <span class="mat-form-field-label-wrapper">...</span>
</mat-form-field>

Is there any way to do that?

What I've been trying so far is to change the input value directly using Javascript.

document.getElementById('input_start-date_filter-events').value = new Date(2020,12,1,13,0,0)
document.getElementById('input_start-date_filter-events').value = "2020-12-01 13 h 00"

The string value gets changed visually, but when I submit the form, the changed value isn't taking into consideration.

Answer 1

等待大神答复