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;
}

Was this article helpful?

https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete