dwinnbrown

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

Hey @Molololol

Try pasting this into the code injection area:

Let me know how that goes!

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
  $(window).on("load", function() {
    $(".sqs-announcement-bar-text-inner").slick({
      autoplay: true,
      arrows: false,
      autoplaySpeed: 3000
    });
  });
</script>
<style>
  .sqs-announcement-bar-text-inner:not(.slick-initialized) p {
    font-size: 0;
  }
</style>

Just spent a couple hours removing custom code chunk by chunk to try and work out what was causing this until I eventually removed everything and saw the bug still happening.... Hoping for a fix soon!

In case anyone is looking for the solution to this, I was able to fix the 'one day off' issue by changing the variable from (removing the split on the 'T') :
 

d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]);

to:

d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content"));

@Beyondspace Did you ever manage to work out a solution to the date offset issue? I've got a site here: https://www.isscr.org/isscr-news/the-power-of-partnership which seems to be 1 day off on some posts - apart from that everything's working perfectly!