Adding a Date Picker to a Squarespace Form

Do you want to ensure that visitors put the correct date in your Squarespace forms? If you use the Date form field you can error-check dates, but this is only useful in North America because it expects dates in the form mm/dd/yyyy. In Europe, visitors expect to input dates in the form dd/mm/yyyy and this can lead to lots of confusion if they don't realise the boxes are the other way around!

One solution is to use a date picker with a text field, instead of using a date field. Date pickers aren't available in the basic Squarespace form, so here's an easy way to add one or more to your form.

The JQuery UI library includes a great date picker that we can use to improve our form. To use it, you add some code to the page that contains your form. Instead of a plain text box, a date picker will appear like this:

 A Squarespace form with a date-picker

A Squarespace form with a date-picker

The code will refer to the ID of the boxes that contain dates on your form. This is something that you will need to discover for your form. I've written some guides that will help you to fund the IDs on your Squarespace page and you may find these helpful: Finding Squarespace ID and Class Selectors and CSS on Squarespace.

Adding the Date box to your Form

Log on to your site and view the page containing the form. I'm assuming that you've already added a Squarespace form to your website. If you haven't add one now.

You will need a standard Text field for the date picker. If your form has a proper Date field (indicated by a calendar icon) then remove this and replace it with a Text field. You can name it 'Date' or anything you like. Note the 'abc' icon beside it, indicating it is a Text field.

Apply the changes to your form, and save the page.

Now, use the Inspector in the Chrome Dev Tools to identify the ID of the text box for the new Date field. You can do this by right-clicking inside the box and choosing Inspect. For more help, see my quick tutorial on the Chrome Dev Tools. You should see something like this:

<div id="text-yui_3_17_2_1_1512552145881_22564" class="form-item field text">
    <label class="title" for="text-yui_3_17_2_1_1512552145881_22564-field">Date</label>
    <input class="field-element text" type="text" id="text-yui_3_17_2_1_1512552145881_22564-field">
    </div>

The ID you need is the one just after the label of your field ('Date' in this case) and after 'input'. The ID in my example above is #text-yui_3_17_2_1_1512552145881_22564-field (remembering to prefix it with a # character.

Save this information somewhere handy as you'll need it in a moment.

Adding Code to the Page

Open the Settings panel for this page. You can reach it using the 'gear' icon beside the page name.

Click Advanced to open the Advanced Settings for the page.

In the PAGE HEADER CODE INJECTION box, paste the following code:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
   $(document).ready(function(){
     $( function() {
       $( "#text-yui_your-reference-here-field" ).datepicker({ dateFormat: 'dd/mm/yy' });
     });
   });    
</script>
Protected by Copyscape

You need to replace #text-yui_your-reference-here-field with the ID of your new 'date' field. In my example it therefore looks like this:

$( "#text-yui_3_17_2_1_1512552145881_22564-field" ).datepicker({ dateFormat: 'dd/mm/yy' });

Save the changes.

date-time-picker.png

When you have re-loaded the page, click in the date field. You should see the date picker with the date shown in European format. You can change this by changing the format in the line of code above.

This tip touches the surface of what is possible. We can customise the style of the picker, prevent the user from typing anything into the text field and add an icon to make it clear that a date picker will appear.

It can also be customised to show the dates in other formats and other languages.

Contact me if you'd like me to help you with your Squarespace site.