Jump to content

Date format DD/MM/YYYY

Recommended Posts

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

Link to comment
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. 

Link to comment

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.

1021922681_ScreenShot2020-11-28at11_17_56AM.png.c811788811825bf73cd80ed368f1114f.png

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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.

1021922681_ScreenShot2020-11-28at11_17_56AM.png.c811788811825bf73cd80ed368f1114f.png

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.

Link to comment
  • 4 weeks later...
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.

1021922681_ScreenShot2020-11-28at11_17_56AM.png.c811788811825bf73cd80ed368f1114f.png

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.

Link to comment

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.

date-picker-tile.png.365f2e3ea01477c0f06bb3ae05d3171b.png

Edited by paul2009
Removed link to Circle post

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...
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")

 

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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. 

Link to comment
  • 1 year later...
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. 


 

Link to comment

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 🙂

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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.
 

Link to comment
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.

Link to comment
  • 1 month later...

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%)'
}

Link to comment
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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  

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.