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()

Answer 2

Try like below to click on date 11 .

cy.get("a.ui-state-default:contains(11)").click();