How to handle date picker in Cypress - angularjs

Question

How to select a past date in the DOB field? What Javascript function can I use in Cypress automation?
It is not a free text field, only can select from the date picker. Here is the screenshot and the HTML
<input _ngcontent-kgi-c484="" id="dob" formcontrolname="dob" readonly=""
bsdatepicker="" placeholder="Optional" class="form-control
plore-form-control ng-valid ng-touched ng-dirty" ng-reflect-name="dob"
ng-reflect-bs-config="[object Object]"
ng-reflect-max-date="Fri Apr 16 2021 00:00:00 GMT+1">
I tried this function but it didn't work
cy.get('#dob').invoke('val').then((text) => {
expect('08/05/1999').to.equal(text);

Answer 1

What I did was add a custom command (we have various datepickers throughout our system, each having a slightly different selector).
Cypress.Commands.add("setDateInput", (selector, value) => {
// wait for the flatpickr instance to be applied before setting the date
// 'flatpickr-input' class is added on initiation
cy.get(`${selector}.flatpickr-input`).then($el => {
$el.get(0)._flatpickr.setDate(value, true)
})
});
Here, you can pass in a changing selector and then the DD/MM/YYYY format as parameters. Hope this helps someone.

Answer 2

The control is a bunch of buttons, you can click them in Cypress, e.g
cy.get('button').contains('8').click(); // select the 8th day
The chevrons (left and right) you'll need to click a few times,
cy.get('button.uib-left').click().click().click().click() // keep going for MM/YY
You can click on that middle part, but I can't figure that one out exactly.
Ok, I figured it out, click "April 2021" once to choose the month
cy.get('button').contains('April 2021').click();
// now select the month
cy.get('button').contains('May').click()
OR click the "April 2021" then "2021" to select the year
cy.get('button').contains('April 2021').click();
cy.get('button').contains('2021').click();
cy.get('button.uib-left').click().click() // get decade with 1999
// now select the year
cy.get('button').contains('1999').click()
But you get the idea, interact the way a user does.