How to change the ":" symbol in between the time fields in datetime field

Hi,

To change the “:” symbol as the time separator, please, follow the instructions below:

– Assign a class name to the date/time fields, for example: my-field

– Insert a “HTML Content” field in the form, and enter as its content, the piece of code below:

<script>
fbuilderjQuery(document).on('showHideDepEvent', function(){
var new_symbol = '/';
fbuilderjQuery( 'form' ).submit(function(){
fbuilderjQuery( this ).find('.my-field input[type="hidden"]').each( function(){
var e = fbuilderjQuery( this ),
    v = e.val();
e.val( v.replace(/:/g, new_symbol) );
});
});
});
</script>

Note: In the previous code replace the value of new_symbol variable with the symbol to use as separator.

About your second question, to set the time field at zero:

– Enter the value: 00:00 as the “Default Time HH:mm” attribute.
– Select the “24 Hours” choice as the time format.

Best regards.

Hello again,

It worked, thanks a lot. However I have another query, Is it possible to add another symbol after the minute field just like the “:” symbol after the hour field.

thanks in advance.

Hi,

You simply should edit the line of code:

e.val( v.replace(/:/g, new_symbol) );

it is part of the code I sent you previously, as follows:

e.val( v.replace(/:/g, new_symbol)+'#' );

Of course, in the previous code you should replace the symbol: # with the symbol you want to display at the end of field’s value.

Best regards.

Hello,

This solution is not working. Can you please take a look at the form in my site and check what’s wrong? Here’s the link https://lyfiseasy.com/tdee-calculator/

Please go to the above link and choose “ft, in” in “unit system” drop down and it’ll show the height field still with “:” symbol.

thanks in advance.

Hello,

The code I sent you previously replaces the date/time format into the hidden field that sends the selected date to the server, however, if you want to replace the symbols in the form structure too, include into the content of the “HTML Content” field, the piece of code below:

<script>
fbuilderjQuery(document).one('showHideDepEvent', function () {
  var new_symbol = 'ft',
  e = fbuilderjQuery('.my-datetime .dfield'),
  html = e.html();

  html = html.replace(/:/, new_symbol);
  e.html(html);	
});
</script>

Best regards.

Hello,

Thank you for the prompt reply. I implemented it and it still doesn’t seem to work.

Hello,

I’ve visited your webpage and it is working fine, replaces the “:” symbol with the value of the “new_symbol” variable as separator of the date fields. Please, look the screenshot in the following link:

https://wordpress.dwbooster.com/customdownloads/2017-01-10/screenshot.jpg

Best regards.

Yes that’s correct. The Above code works. However if I replace
html = html.replace(/:/, new_symbol);
with
html = html.replace(/:/, new_symbol)+'in' );
the “in” doesn’t appear after the minute field. It rather causes the form to ignore all the dependencies of the ‘Unit System” dropdown.

here’s the image of above scenario: https://prntscr.com/du394e

• This reply was modified 7 years, 10 months ago by Damn!.
• This reply was modified 7 years, 10 months ago by Damn!.
• This reply was modified 7 years, 10 months ago by Damn!.
• This reply was modified 7 years, 10 months ago by Damn!.
• This reply was modified 7 years, 10 months ago by Damn!.

Hello,

Your code is incorrect, the number of parentheses is wrong, the correct one would be:

html = html.replace(/:/, new_symbol+'in');

Best regards.

Thank you. The above code causes the “in” to be added before the minute field and not after the minute field. it now appears as “ftin”.

Hello,

The code to use would be similar to the yours:

html = html.replace(/:/, new_symbol)+'in';

Without the close parenthesis in your version of the code.

Best regards.

Hello,

The above code brings the “in” to the next line. Apart from this the field triggers this warning “Please enter a valid date with this format(mm/dd/yyyy)”.

• This reply was modified 7 years, 10 months ago by Damn!.

Hello @greedymind,

In reality you are using a date/time field to emulate a ft/in field, but the date time fields check the format of the values entered.

Why not use two dropdown fields for feet and inches respectively, displaying them side by side using the special class name: column2?

Best regards.

Hello,

I have tried displaying two dropdown fields side by side by putting them in a container but since my form is aligned to the left it looks rather misaligned with the rest of the form which is why I preferred to go with the datetime field.

And regarding the warning it only happens when you add the “in” to the field because previously I had just “ft” and the warning didn’t appear.

Thanks.

Hello,

The issue is not happening with the text inserted in the form, but with the texts inserted into the hidden field that contains the selected date, about the appearance of form, instead the modify the behavior of a controls, you simply should assign some class names to the fields and defined a couple of styles to get the appearance you want.

If you prefer I can offer you a custom coding service from my personal website:

https://cff.dwbooster.com/customization

Best regards.