International Date Field Formatting with Javascript

As a default, Formstack uses the American format with date fields. However, we recognize many of our customers use the date format with the day preceding the month. With Javascript, we can get the date fields on your form to respect this formatting.  With javascript like this, it is even possible to expand to other date and time formats like 24-hour vs 12-hour format.

 

If you navigate to Form Settings, at the bottom we can see a section called Javascript Code. Here, you can place the code below to change the formatting of the date.

 

 

 

Code to Change Date for Professional, Enterprise, and Enterprise Plus Forms

 

function FF_OnBeforeRender(){

console.log('Before Render Starts');

 

//This for DatePicker, the format we get from jQuery http://api.jqueryui.com/datepicker/#utility-formatDate

window.fs_formLocalejQueryDate = 'dd/mm/yy';

window.fs_formLocalejQueryTime = 'hh:mm:ss TT';

 

//This for the date format in the field, the format we use from momentjs: https://momentjs.com/docs/#/displaying/

window.fs_formLocaleDate = 'DD/MM/YYYY';

window.fs_formLocaleTime = 'hh:mm:ss A';

 

return true;

}

 

 

To display date and time in a field we would simply join the two elements like this: window.fs_formLocaleDate + ' ' + window.fs_formLocaleTime

 

Code to Change Date for Native Cloud or Community Forms

 

function FF_OnAfterRender(){

jQuery(".hasDatepicker").each(function(){

jQuery(this).datepicker("destroy");

jQuery(this).datepicker({

dateFormat: "dd/mm/yy"

});

});

return true;

}

function FF_OnBeforeSave(){

jQuery(".hasDatepicker").each(function(){

var vText = jQuery(this).val();

var vDates = vText.split('/');

console.log(vDates[0]);

console.log(vDates[1]);

console.log(vDates[2]);

jQuery(this).val(vDates[1] + "/" + vDates[0] + "/" + vDates[2]);

});

return true;

}  

 

 

Changed Date

As you can see below, our form now respects the new date format!

 

Repeatable Sections

 

If your form utilizes repeatable sections, you can still have the date field change formatting, you'll just need to add some different code to account for this.

 

function FF_OnAfterRender(){

AddEvent();

jQuery(".hasDatepicker").each(function(){

jQuery(this).datepicker("destroy");

jQuery(this).datepicker({

  dateFormat: "dd/mm/yy"

});

});

return true;

}

function AddEvent(){

jQuery(".ff-alink.ff-add").click(function(){

jQuery(".hasDatepicker").each(function(){

jQuery(this).datepicker("destroy");

jQuery(this).datepicker({

  dateFormat: "dd/mm/yy"

});

});

});

}

function FF_OnBeforeSave(){

jQuery(".hasDatepicker").each(function(){

var vText = jQuery(this).val();

var vDates = vText.split('/');

console.log(vDates[0]);

console.log(vDates[1]);

console.log(vDates[2]);

jQuery(this).val(vDates[1] + "/" + vDates[0] + "/" + vDates[2]);

});

return true;

}