I have put together a solution for those using the form block...
Full walkthrough here: https://www.winn-brown.co.uk/blog/how-to-add-a-datepicker-to-squarespace-form-block-2023
Note: this doesn't yet support the add to cart popup forms but I will be updating it soon with support for that.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
$(window).on("load", function() {
function rmydays(date) {
//disable weekends (Sat and Sun // 0 = Sunday, 1= Monday etc.)
return date.getDay() === 0 || date.getDay() === 6;
}
var flatpickrOptions = {
"disable": [
// Disable weekends and specific dates using the rmydays function
rmydays,
"2023-12-24",
"2023-12-25"
],
minDate: "today", //don't allow users to select dates in the past
"locale": {
"firstDayOfWeek": 1 // Start the week on Monday
}
};
$(".sqs-block-form").each(function() {
if ( $(".lightbox-handle-wrapper").length ) {
$(".lightbox-handle").click(function() {
var checkExist = setInterval(function() {
if ( $(".form-item label:contains('Date')").length ) {
clearInterval(checkExist);
$(".form-item label:contains('Date')").next().flatpickr(flatpickrOptions);
}
}, 100);
});
} else {
$(".form-item label:contains('Date')").next().flatpickr(flatpickrOptions);
}
});
});
</script>
<style>
.flatpickr-calendar.open {
z-index: 999999999 !important;
}
</style>
Hope it helps!