Date Picker for Squarespace Forms
Avoid date format confusion. Show a calendar.
Updated in July 2019 for Squarespace 7.1
Updated in July 2019 for Squarespace 7.1
A Date Picker makes it easy for visitors to enter dates in Squarespace forms reliably and visually. With two clicks they can enter a valid date in a format of your choice. Rid yourself of date format confusion (is 7/4 the 7th April or July 4th?) and make it easy for your customers.
Instant digital download with full installation instructions included.
Make your forms visitor-friendly by displaying the calendar in any language.
Change the colours of the calendar to match your site’s brand image.
Works with all standard forms (not lightbox, product or checkout forms)
Optionally show multiple months in a single date picker, if required.
Choose different animations when opening and closing the date picker.
Try the date picker here in various languages with different animations:
What does this mean?
If you added a standard form to your Squarespace website using a Form Block, or you edited one of the standard forms in template demo content then the plugin will work. Standard forms are always visible on the page, they don’t pop up.
The plugin does not work with forms that appear in a lightbox. For example, it will not work if you enable the advanced form feature known as Lightbox mode and it will not work with Custom Product Forms or Custom Checkout Forms. Click the links to read Squarespace articles that describe these features.
We continue to improve our products and service offerings to meet the needs of our customers through small incremental continuous improvements. In the future we plan to make this plugin compatible with custom forms but we cannot commit to a date when this may happen.
Full instructions are provided when you purchase this plugin. Installation is as simple as copying and pasting the code into your website’s code areas. With some tweaking, you can customise it to match your branding. If you are unsure, you can book a developer to help you.
A link to the code is automatically emailed to you within minutes. The link expires after 24 hours, so it’s a good idea to download the document immediately, even if you plan to install the plugin later.
All Squarespace templates are fully supported and we’ve extensively tested every version of the plugin on the most popular templates - the Bedford and the Brine families.
On 11th July 2019, Squarespace launched ‘Squarespace 7.1’, an updated version of their platform with simpler options that focus on flexibility and ease-of-use for those who are new to websites. We have updated this plugin to be compatible with Squarespace 7.1 templates but as Squarespace are still tweaking the newest version of their platform, we can expect to see changes that may affect plugins.
To see which platform your site uses, log into your site and click Help in the left panel.
After adding a standard Form Block to your website, you decide which field (or fields) you want to use with the date picker. When a visitor reaches this field on your form, the date picker will appear to prompt them to enter a date. The visitor can navigate between months and choose any valid date by simply clicking (or tapping) that date. The date picker then disappears and the chosen date appears in the date field. We’ve locked the text box to prevent users manually editing the date, to avoid invalid date entry.
Yes! There’s a demonstration just above this FAQ section. If you can’t see it, click here.
Yes. The date picker supports a full range of internationalisation (i18n) options. When you change the language, all the labels change to match your choice.
You can select the language for each individual date picker, allowing you to create a multilingual website with forms in different languages. We’ve shown this in the demonstration above.
Yes. When a visitor has selected a date using the date picker, the date will appear in the text box of the form. You can choose how the date is displayed. When you first install the plugin, the date will appear in UK format, where January 20th 2019 will appear as 20/01/2019. To choose a different format, change the format on line 14 in the Code Injection area.
Substitute 'dd/mm/yy' for your preferred format, using any combination of these codes (noting they are case-sensitive):
d - day of month (no leading zero)
dd - day of month (two digit)
o - day of the year (no leading zeros)
oo - day of the year (three digit)
D - day name short
DD - day name long
m - month of year (no leading zero)
mm - month of year (two digit)
M - month name short
MM - month name long
y - year (two digit)
yy - year (four digit)
'' - single quote
anything else - literal text
For example, if you would like the year to appear as two digits, you can use y instead of yy.
To have January show as ‘01’, use mm; to show it as ‘1’ use m. To have it show as ‘January’, use MM. For ‘Jan’ use M.
To include the name of the day (for example Mon or Monday) you can use D for the short version (Mon) or DD for the long version (Monday).
As you can see, it is very flexible.
Yes, you can customise the colours used in the popup to match your site or branding. It’s as easy as entering the required colour codes. If you don’t know what the colour codes are, use this colour picker to select your colours.
Yes. If you want to prevent visitors selecting special dates like public holidays, you can specify each individual date on line 8.
Yes. Sometimes you may want to prevent visitors selecting dates in the past, for example when booking a place at a campsite. You may also want to prevent them selecting a date in the next few days, for example, when booking a delivery date for a special order cake. You can do either of these by editing line 15.
Yes. By default, the datepicker will show a single month, but you can display more than one by changing the value on line 16.
Yes, the datepicker works well on touch devices like mobiles and tablets.