Pick date in jquery calendar with cypress

Question

I have the following code snippet of jquery calendar plugin used in my app and the cypress code snipped to select the date 1990-10-11.

$(function() {
  $("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:"yy-mm-dd"
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" id="datepicker"></p>

    cy.get("#datepicker").click();
    cy.get(".ui-datepicker-month").select("10");
    cy.get(".ui-datepicker-year").select("1990");
    cy.get("table.ui-datepicker-calendar").then(() => {
        cy.contains('11').click();
    });

With the code I can change the year and month but cannot select the day. How can I set the date to 1990-10-11 via cypress.

Answer 1

@Karan's answer looks good, but I would be more specific in the select (since ui-state-default looks a little too generic).

cy.get('[data-handler="selectDay"] a:contains("11")').click()