Date format DD/MM/YYYY

An alternative solution is to use a datepicker, as this makes date selection unambiguous.

We sell a datepicker that you can add to almost any Squarespace form to make it easy for visitors to enter dates reliably and visually. It's in use on thousands of Squarespace websites. With two clicks visitors can enter a valid date in a format of your choice. For more information and live examples, see the datepicker product page.

Hi. Have you solved this yet?

On 11/22/2020 at 2:46 AM, tuanphan said:

Hi. Have you solved this yet?

Hello, I have not solved this yet.

Can you use a standard date field instead of three separate text fields?

I think a solution would be easier if you could.

On 11/26/2020 at 9:17 AM, creedon said:

Can you use a standard date field instead of three separate text fields?

I think a solution would be easier if you could.

Agree, using a standard date field would be the best solution. Unfortnuately Squarespace has not a date field in the DD/MM/YYYY format. 

A standard date field can be changed with CSS much more easily then three separate text fields. This would allow you to change the date to DD/MM/YYYY.

Because the date field is grouped and ordered in a specific way, reordering them is pretty easy.

Add the follow to Design > Custom CSS.

#block-cd9a11642ad010a98fec .date {

  display: flex;
  
  }

#block-cd9a11642ad010a98fec .day {

  order: -1;

  }

This is for a v7.1 site and the block id is specific to m_lunberg's site.

Let us know how it goes.

12 hours ago, creedon said:

A standard date field can be changed with CSS much more easily then three separate text fields. This would allow you to change the date to DD/MM/YYYY.

Because the date field is grouped and ordered in a specific way, reordering them is pretty easy.

Add the follow to Design > Custom CSS.

#block-cd9a11642ad010a98fec .date {

  display: flex;
  
  }

#block-cd9a11642ad010a98fec .day {

  order: -1;

  }

This is for a v7.1 site and the block id is specific to m_lunberg's site.

Let us know how it goes.

That worked perfectly, thanks a lot! This problem has been bugging me for a while.

On 11/28/2020 at 8:32 PM, creedon said:

A standard date field can be changed with CSS much more easily then three separate text fields. This would allow you to change the date to DD/MM/YYYY.

Because the date field is grouped and ordered in a specific way, reordering them is pretty easy.

Add the follow to Design > Custom CSS.

#block-cd9a11642ad010a98fec .date {

  display: flex;
  
  }

#block-cd9a11642ad010a98fec .day {

  order: -1;

  }

This is for a v7.1 site and the block id is specific to m_lunberg's site.

Let us know how it goes.

Sorry, I didn't test this thoroughly enough first and I didn't notice the tabbing-order is as the old arrangement, i.e when you are on the date field and and hit the TAB-key to enter the next field it goes straight to the year-field. Is it possible to change the tabbing-order as well as the visual order. Fortunately it's no problem on phones or tablets.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    $( '[data-form-id="5f5611b7a081cc5ab340fd40"] *' )
    
      .filter ( ':input' )
      
        .slice ( 0, 4 )
        
          .attr ( 'tabindex', 1 )
          
          .end ( )
          
        .slice ( 4 )
        
          .attr ( 'tabindex', 3 )
          
          .end ( )
          
        .slice ( 5, 6 )
        
          .attr ( 'tabindex', 2 );
          
    } );
    
  </script>

This is specifically for this site.

Because we changed the visual order we now need to override the natural tab order.

Let us know how it goes.

On 12/25/2020 at 1:12 AM, creedon said:

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<script>

  $( ( ) => {
  
    $( '[data-form-id="5f5611b7a081cc5ab340fd40"] *' )
    
      .filter ( ':input' )
      
        .slice ( 0, 4 )
        
          .attr ( 'tabindex', 1 )
          
          .end ( )
          
        .slice ( 4 )
        
          .attr ( 'tabindex', 3 )
          
          .end ( )
          
        .slice ( 5, 6 )
        
          .attr ( 'tabindex', 2 );
          
    } );
    
  </script>

This is specifically for this site.

Because we changed the visual order we now need to override the natural tab order.

Let us know how it goes.

Thanks Creedon! that worked perfectly! I also have 3 different forms (the first part of the forms are identical) that prompts when you hit the "add to cart" button. I copied the code into the product page (Page Header Code Injection) and changed the data-form-id (the only part of the above code I do actually understand) . I wasn't able to edit it to work on the product page forms. Is it possible to make the script work at the product forms as well? I have added the productpages and their data-form-id's below. 

-finn1pt.squarespace.com/betalingsside/p/d2fjnb9tfbqqpr2jdaavgkataw0noa (data-form-id="5fd0895e281783041124d4ba")

-finn1pt.squarespace.com/to-annonser/p/mnedlig-abonnement (data-form-id="5feadcbf9dff657eec243c9e")

-finn1pt.squarespace.com/treannonser/p/rlig-abonnement (data-form-id="5feaf787d54d01335d5a3b1e")

On 1/5/2021 at 8:49 PM, m_lundberg said:

Thanks Creedon! that worked perfectly! I also have 3 different forms (the first part of the forms are identical) that prompts when you hit the "add to cart" button. I copied the code into the product page (Page Header Code Injection) and changed the data-form-id (the only part of the above code I do actually understand) . I wasn't able to edit it to work on the product page forms. Is it possible to make the script work at the product forms as well? I have added the productpages and their data-form-id's below. 

-finn1pt.squarespace.com/betalingsside/p/d2fjnb9tfbqqpr2jdaavgkataw0noa (data-form-id="5fd0895e281783041124d4ba")

-finn1pt.squarespace.com/to-annonser/p/mnedlig-abonnement (data-form-id="5feadcbf9dff657eec243c9e")

-finn1pt.squarespace.com/treannonser/p/rlig-abonnement (data-form-id="5feaf787d54d01335d5a3b1e")

 

 

Have you found the code yet?

19 minutes ago, tuanphan said:

Have you found the code yet?

I haven't found out of this yet. I thought it was just to change the data-form-id, which is the only part of the code I understand 😄

On 1/5/2021 at 5:49 AM, m_lundberg said:

I also have 3 different forms (the first part of the forms are identical) that prompts when you hit the "add to cart" button. I copied the code into the product page (Page Header Code Injection) and changed the data-form-id

The code won't work as is. The forms for product items are not available when the page loads. The code above runs right after the page is loaded. In other words when you click on the button to bring the form up it is loaded on the fly, after the page has already loaded.

There is a way to modify forms that are loaded on the fly using a Mutation Observer. It is not an insignificant amount of work.

On 1/5/2021 at 1:49 PM, m_lundberg said:

I wasn't able to edit it to work on the product page forms.

If it helps, our datepicker extension works on custom product forms too.

10 hours ago, creedon said:

The code won't work as is. The forms for product items are not available when the page loads. The code above runs right after the page is loaded. In other words when you click on the button to bring the form up it is loaded on the fly, after the page has already loaded.

There is a way to modify forms that are loaded on the fly using a Mutation Observer. It is not an insignificant amount of work.

Ok, thanks! That was what I was worried about. 

8 hours ago, paul2009 said:

If it helps, our datepicker extension works on custom product forms too.

Thanks! Good to know, I will look into the datepicker more closely.