Autofill for read-only date picker/calendar - Need help with Javascript rule

[Gab]

I'm hoping that someone might be able to help with creating/modifying a JavaScript rule to autofill a calendar that seems to be a read-only date-picker. 

I'm trying to figure out if there are any hidden fields that can be overwritten with text, but I have extremely limited coding experience so I'm operating sort of blindly.

I've checked the source code for the webpage and the specific elements to select a date, but haven't had much luck creating a simple JavaScript rule to get the auto-selection of the check-in and check-out dates.

Here's the webpage: https://book.passkey.com/go/Katsucon2024

The check-in date is February 15, and check-out date is February 18. I assume each calendar/date-picker would need their own rule?

Any help would be much appreciated!

Thanks,

Gabby

[turbowells]

This is ugly, but it will simulate the clicks required:

setTimeout(function () {
    calin = document.querySelectorAll("input[id='check-in-date']")
        calin[0].click()
        tdin = document.querySelectorAll("td[id='dp_in_1_15']")
        tdin[0].click()
        clickme1 = document.querySelectorAll("a[data-date='15']")
        clickme1[1].click()
        setTimeout(function () {
            calout = document.querySelectorAll("input[id='check-out-date']")
                calout[0].click()
                tdout = document.querySelectorAll("td[id='dp_out_1_18']")
                tdout[0].click()
                clickme2 = document.querySelectorAll("a[data-date='18']")
                clickme2[1].click()
        }, 1000);
}, 1000);