Date format DD/MM/YYYY

Site URL: https://finn1pt.squarespace.com/lag-en-profil

Hello,

I have been searching around here on the forum and found a few others asking this. What I have done so far is to add three separate drop-down menus in the form, and used CSS (Position and top/left) to get them in-line vertically. Like this:

#select-yui_3_17_2_1_1604061689568_154917 {
  position: absolute;
  top:  273px;
  left: 65px;

I was happy with that solution until I tried the site using Mozilla Firefox, all three check-boxes was a few pixels off. IE and google chrome works fine. Any suggestions?

https://finn1pt.squarespace.com/lag-en-profil

password: access

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 than 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.

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.

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. 

On 12/25/2020 at 12: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.

Hi @creedon, or anyone else. Would it be possible to break down the slice javascript? Presumably it's jquery syntax. Do I need to load jquery myself too?

The tab order issue is catching me out too, but the original example site has now expired.

Thanks. 


 

Note that changing the order of the elements on the form won't make any difference to the data that you receive when the form is submitted. The date will still be shown in the format mm-dd-yy.

I mention it because it's probably the last thing on your mind when the submissions arrive 🙂

36 minutes ago, TaranTim said:

Would it be possible to break down the slice javascript?

https://api.jquery.com/slice/

Quote

Presumably it's jquery syntax.

It is a jQuery method.

Quote

Do I need to load jquery myself too?

To use jQuery you need to install it.

23 minutes ago, creedon said:

https://api.jquery.com/slice/

It is a jQuery method.

To use jQuery you need to install it.

Thanks for such a quick reply. It's really appreciated. I've now implemented some rather less sophisticated (non-jQuery) code, which works (running in a code block since I'm not admin on this site). The problem now is that all the other form elements still have a tabIndex of 0, so the date-picker doesn't sit within the tab order of the rest of the rather longer form. Tabbing out of the Year field just takes me back to the top of the page. I suppose I'll just have to set the tabs of all the input elements in the form.

And all because the Americans use such a daft date format. I really wanted to like Squarespace, so I'm really disappointed they don't provide standard date-picker options in other (better) formats.
 

52 minutes ago, paul2009 said:

Note that changing the order of the elements on the form won't make any difference to the data that you receive when the form is submitted. The date will still be shown in the format mm-dd-yy.

Thanks. I'd noticed that already but it's a good point. I'm bound to forget and mess it up at some point!

I did also have a look at your date-picker, and I'm sure it's worth the money, but as a volunteer working on a website for a volunteer-run, not-for-profit running-club website, sadly I can't justify it.

Site URL: https://www.garybarrettphoto.com/

I've used the following CSS to change the date format from MM DD YYY to DD MM YYYY on a contact form and although it has worked on the front end, the date on the form submission (the content that's sent to the recipient) is still in the original MM DD YYYY. 

Is it possible to change this on the back end so that the recipient receives the date in the revised format of DD MM YYYY?

.field.month.two-digits{
   left:~'calc(3.5rem + 2%)'
}
.field.day.two-digits {
   left:~'calc(-3.5rem - 2%)'
}

11 minutes ago, DreamrW said:

Is it possible to change [the contact form date] on the back end so that the recipient receives the date in the revised format of DD MM YYYY?

No.

As you've found, changing the form's appearance with CSS is just a workaround. It isn't possible to change the underlying date format. It has been an issue on Squarespace since the beginning. 

Another workaround is to use some text or drop-down boxes to try to capture a date but the user experience is not ideal. 

If you are interested in a paid solution, we sell a Datepicker Extension for Squarespace that automatically adds a datepicker to fields that have 'date' in the name (or the equivalent in another language). It makes it super easy to add a datepicker to Contact Forms.

On 7/21/2022 at 9:49 PM, paul2009 said:

No.

As you've found, changing the form's appearance with CSS is just a workaround. It isn't possible to change the underlying date format. It has been an issue on Squarespace since the beginning. 

Another workaround is to use some text or drop-down boxes to try to capture a date but the user experience is not ideal. 

If you are interested in a paid solution, we sell a Datepicker Extension for Squarespace that automatically adds a datepicker to fields that have 'date' in the name (or the equivalent in another language). It makes it super easy to add a datepicker to Contact Forms.

Much appreciated Paul