Let's Talk

How to: Add a Datepicker to Squarespace Form Block [2023]

Adding a datepicker to a Squarespace form block is something that had been relatively with the help of a 3rd party plugin up until recently when some of the core code was updated.

We were hired by a client to come up with a custom coded solution so I thought I would share this with the community.

Key Features:

Add a DatePicker UI to both on-page and lightbox forms
Disable days of the week e.g. block off every Saturday and Sunday
Disable specific one-off dates

Walkthrough:

Code:

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

Need help installing this code?

👉 Get in Touch 👈

‹ Squarespace Help: How to Troubleshoot Common DNS Issues on Your Website

Top Online Squarespace Courses to Help You Manage Your Squarespace Website ›