Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Date format DD/MM/YYYY


m_lundberg

Question

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 post
  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

16 answers to this question

Recommended Posts

  • 1

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

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

I think a solution would be easier if you could.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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 post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0
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 😄

Link to post
  • 0
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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...