Website Design, Squarespace Development and Shopify Commerce

Date Picker for Squarespace Forms

Avoid date format confusion. Show a calendar.

calendar-header-tny.jpg

Why do I need the Date Picker?

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.

 
easy installation

Self-Installation

Instant digital download with full installation instructions included.

multi language text

Localise the language

Make your forms visitor-friendly by displaying the calendar in any language.

colours can be changed

Match your brand

Change the colours of the calendar to match your site’s brand image.

 
Compatible with all templates

Template support

Works with all standard forms in Squarespace 7.0 and 7.1. Not with lightbox, product or checkout forms.

multiple months possible

Display multiple months

Optionally show multiple months in a single date picker, if required.

animated features

Limit available dates

Restrict the range of selectable dates or make certain dates unavailable.

 

Make it easy for visitors to enter dates in your Squarespace forms

19.99 24.99
Buy Now

Reviews

Live Examples

Try the date picker here in various languages with different animations:

 

Frequently Asked Questions

What types of form are supported?

The plugin works with all standard Form Blocks. It does not currently work with lightbox forms, Custom Product Forms or Custom Checkout Forms.

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.

How do I install the plugin?

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.

When will I receive the plugin?

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.

Is my Squarespace template supported?

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.

How to view your Squarespace template name and version

How to view your Squarespace template name and version

Is my Squarespace plan supported?

The plugin can be installed on sites that are on the Business, Commerce Basic and Commerce Advanced plans, as well as some legacy plans. The plugin is unsuitable for the Personal plan because this does not support JavaScript. If you are unsure which plan you are on, check the Billing section of your website. To do this, click Settings, then click Billing & Account, and finally click Billing.

How does the plugin work?

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.

Can I try the plugin?

Yes! There’s a demonstration just above this FAQ section. If you can’t see it, click here.

Can I choose a different language?

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.

Can I change the format of the date in the text box?

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.

Can I customise the colours?

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.

Can I prevent visitors selecting special dates?

Yes. If you want to prevent visitors selecting special dates like public holidays, you can specify each individual date on line 8.

Can I prevent visitors selecting dates in the past, or in the next few days?

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.

Can the datepicker show more than one month at a time?

Yes. By default, the datepicker will show a single month, but you can display more than one by changing the value on line 16.

Datepicker showing three months ahead

Does the datepicker work on mobile?

Yes, the datepicker works well on touch devices like mobiles and tablets.