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!
Can you share the link? If you go to the announcement bar settings you should also have each piece of text you want to display on it's own line by hitting 'return' on the keyboard
dwinnbrown got a reaction from EstherScout in Date Picker S.O.S
dwinnbrown got a reaction from tuanphan in How to make an announcement bar have multiple announements?
