Jump to content

Can I add drop-down calendar (date picker) to a Form?

Recommended Posts

Hi everyone. My last attempt to find a solution here. Squarespace cannot give me a good solution but maybe there is another trick to do this. Hope someone can help me because I want to avoid to switch my business homepage to another provider.On my homepage I have a "make a reservation" editing form. On this form I have arrival date and departure date. What I need is when people click on the arrival date button that they see a visual calendar to click on the day they want. The same for departure date. Now you have the choice between a blank frame (as I have now) or date block which is basically the same. Results are that my customers make mistakes by typing wrongly. This is very annoying and should be avoided. Hope to find a solution.the link to my reservation page: https://camping-cul.com/reservations/Thank you for your help and suggestions,WimSwitserland

Link to comment
  • Replies 10
  • Created
  • Last Reply

Hi Wim

Great question!

Although there isn't a date picker included with Squarespace, we've built a plugin that you can use to add one to a Squarespace form, available in any language. Full details are here:

Date Picker for Squarespace Forms

alt text

screen-shot-2017-06-03-at-172846.png.dddf1a9c67f42f3e96e0b1b1c284226d.png

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Hi Paul, Thank you so much for your help.After years of trying I finally got it correct now. You are a lifesaver :-))I put the english drop down calendar in and it shows on both reservation forms: german and english.I would like to put in the german calendar too but I'm not sure where to do that. Just continue in code injection, Header, and continue to add ?? I have 11 lines now for the english code.

Anyway, I'm over the moon happy here and would like to thank you again for your support.
Kind regards from Switserland, Wim

Link to comment

Hi Paul, Thank you so much for your help.After years of trying I finally got it correct now. You are a lifesaver :-))I put the english drop down calendar in and it shows on both reservation forms: german and english.I would like to put in the german calendar too but I'm not sure where to do that. Just continue in code injection, Header, and continue to add ?? I have 11 lines now for the english code.

Anyway, I'm over the moon happy here and would like to thank you again for your support.
Kind regards from Switserland, Wim

Link to comment

Happy to help!

I think you've added the code in the wrong place. I think you added it to Settings > Advanced > Code Injection > Header. This will affect the whole site and explains why it appears on both forms.

Remove the code from here, and put it on the Settings for each reservations page instead. Whilst viewing the page, click Settings (appears on pop-up menu) then click Advanced at top of Settings page. Add the code and Save.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Add the first block of code to the English page. If you've removed the old code, you should find that the German page is without the date-picker. Then add the second block of code the German language page.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Hi Paul, Can't thank you enough !I think I managed to put in both codes now. It looks much better than before.Let me know if I can do something for you. Unfortunately I'm not a computer expert LOL :-))Thanks again Paul,

greetingsWim

Link to comment

Hi Paul, Can't thank you enough !I think I managed to put in both codes now. It looks much better than before.Let me know if I can do something for you. Unfortunately I'm not a computer expert LOL :-))Thanks again Paul,

greetingsWim

Link to comment
  • 2 months later...
  • 3 weeks later...

Hi there Paul we are looking for this exact thing on our custom checkout form so a customer can select their delivery date - we currently use a text box for the customer to manually enter with a DD MM YYYY note in there in order to try and get around the US format in the date field!!

Is this possible here or can we work around another way maybe by having this in a product form??

https://www.verdure.co.uk/flower-shop/

Many thanks

Link to comment
  • 3 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.