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 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
conversiontracking 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"... Beyondspace 1 Link to comment
DatePickerNeeded Posted September 17, 2023 Share Posted September 17, 2023 I am also about to launch my website for flower delivery. I don't understand why this hasn't been fixed yet Beyondspace 1 Link to comment
dwinnbrown Posted October 30, 2023 Share Posted October 30, 2023 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! Beyondspace and EstherScout 2 Official Squarespace Expert | Founder @ Winn-Brown & Co. 👉 Get in Touch 📍 London, UK Link to comment
Beyondspace Posted May 23 Share Posted May 23 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 Omari 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment