Jump to content

Date Picker S.O.S

Go to solution Solved by paul2009,

Recommended Posts

  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

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.