Jump to content

Date Picker S.O.S

Go to solution Solved by paul2009,

Recommended Posts

  • Solution

It is possible to add a datepicker to almost all forms on Squarespace. We have produced a popular Datepicker Extension for Squarespace that allows you to add a datepicker to any Custom Product Form (or standard form). It allows you to disable specific dates, set lead times and so on.

date-picker-tile.png.8cef1f5cf51743e68918ea7bd8748720.png

This can work really well if a customer is ordering a single product (perhaps with variants for optional add-ons) because you can prompt for the delivery date when they add the item to their cart. It doesn't work so well if customers are encouraged to buy a number of different products, because they'll be prompted for a date for every product.

It isn't possible to add a datepicker or manage dates on the checkout page. This is because the checkout page is locked down to protect the payments process. It prevents anyone from adding the necessary code to introduce a datepicker.

DM me if you have any questions, or contact us via the chat link on our website for an interactive chat.

-Pauldatepicker-demo.thumb.gif.1fe8df5d87f4b3e81fcaebd681ade72b.gif

 

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
  • 11 months later...

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

Edited by codeandtonic
details

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 9 months later...

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

Link to comment
  • 1 year later...
  • 1 month later...

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!

 

Official Squarespace Expert  |  Founder @ Winn-Brown & Co. 

👉  Get in Touch

📍 London, UK

Link to comment
  • 6 months later...

For those considering similar solutions, the Beyondspace's Squarespace DatePicker plugin offers extensive capabilities beyond just a simple date picker. It allows for multiple date picker rules, such as disabling specific dates, setting lead times, and more. Despite the limitation on the checkout form, this plugin can still be effectively used in various form elements like:

  • Form Blocks (also on lightbox mode)
  • Product Forms
  • Product Forms on the /cart page
  • Product Forms in Product Quick View
  • Product Forms in Product Blocks
  • Summary Blocks binding Store collections

Additionally, it is compatible with the newest localized Form Blocks of Squarespace.

Latest Documentation

@DatePickerNeeded you can find numberous of flowershop that are using my solutions

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.