Elleinad Posted December 4, 2020 Share Posted December 4, 2020 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. Link to comment
Solution paul2009 Posted December 4, 2020 Solution Share Posted December 4, 2020 (edited) 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. 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. -Paul Edited January 7, 2022 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
codeandtonic Posted November 23, 2021 Share Posted November 23, 2021 (edited) 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 CheckoutSquarespace Scheduling before checkoutSquarespace 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 November 24, 2021 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
zoxoxu Posted September 12, 2022 Share Posted September 12, 2022 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 Create a normal txt input on your form copy the id of the input field (through right click -> inspect) open the settings of the page then advanced 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment