Date Picker S.O.S

Site URL: http://www.bloombloom.co.nz

hi,

I am about to launch my website for flower delivery.

I am wanting to know how to add a DATE PICKER or Calender at checkout or while adding items, & inputting address to help customers pre-order items... but also disable dates to be chosen... Eg: Weekends, Christmas Day New Years etc.

Appreciate any help and direction.

You can also use Squarespace (Acuity) Scheduling

The datepicker mentioned by paul2009 can be a very good solution because it's so damn simple to setup. I also like the datepicker plugin by sf.digital.

But like Paul mentioned, it doesn't work well if you have multiple products. 

For a more advanced setup it's possible to link Squarespace Scheduling & Squarespace Checkout – however it needs a bit of custom coding.  But then blocking off dates is very easy that way. 

I have a blog post about this that I'm constantly updating: How to dd Acuity Scheduling to Squarespace e-commerce checkout 

You can also check out these example videos to see how Scheduling works with Squarespace Checkout
Squarespace Scheduling before checkout
Squarespace Scheduling after checkout

I will probably create a plugin for this as I have most of the code ready from coding it to multiple clients.

-Fenix

Another (free) option:

HTML forms have a type of input called date that come by default with a date picker, you can't change the type with squarespace but you can override it. Not all the old version of browsers will support this form input - link

1. Create a normal txt input on your form
2. copy the id of the input field (through right click -> inspect)
3. open the settings of the page then advanced
4. paste the follow code and replace YOUR-ID with the ID you copied

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
  $( document ).ready(function() {
    $('#YOUR-ID').attr("type", "date");
	});
</script>

same with number field and others...

A shame that Squarespace doesn't use the correct type for their forms, number should be input type="number" instead of type="text"...

I am also about to launch my website for flower delivery. I don't understand why this hasn't been fixed yet

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!