Elementor Pro features an awesome in-house form builder with the ability to add various input types and the date picker is also included. Currently, the Elementor doesn’t provide options for formatting the data in the form date picker field, it’s by the default in form of YYYY/MM/DD.
This article explains how to change the default Elementor date format to some other like, for example, the Australian date format, which is DD/MM/YY.
You can also refer the official PHP date format to see other values for your specific needs.
jQuery snippet for changing Elementor Form date format
To change the date format using jQuery, just navigate to WP Admin > Elementor > Custom code. Here just create a new Custom code entry, set it to body start, and paste this code below.
<script>
jQuery(document).ready(function($){
setTimeout(function(){
$('.flatpickr-input').each(function(){ flatpickr( $(this)[0] ).set('dateFormat', 'd/m/Y');}); }, 1000 );
});
</script>
Save changes and test the form on the front-end, after picking the date, you should see the value-added in the format of d/m/y which will look like this 25/01/22
You can also alter the d/m/y to d.m.Y. and it will display in this format, for example, 22.02.2022.
Conclusion
This should be considered as a temporary solution as this could be enhanced in the future. Also, there is a known issue with the date form input field in the editor, not displaying this value initially.
Feel free to leave a comment or share your impressions on this Elementor guide.
Nice code! – But it also works on time fields as a date 🙂
Hi,
I follow the steps to change the date format but WordPress says ‘Flatpicker is not defined’.
What should I do?
By the way, this website is not yet live.
Sander
This error message is related to something else and not directly to this guide. It seems that the value for Flatpicker is not defined, please try the usual troubleshooting steps like disabling the 3rd party plugins and check if the error message is gone.
When using the “redirect” action it doesn’t seem to accept the formatting that was added. The submit sends the data via URL with the date of the day :/
Hi,
Trying to apply this to a form in a popup and it is not working. Any suggestion?
I have used it for a proper page for another project and it worked like a charm. The popup seem to be the problem…
Is there a way to have the date displayed example dd/mm/yyyy when date is selected but when submitted its yyyyddmm
Hello, your post is very good, thanks for sharing. I have a question, is there a way to make the date format only dd/mm. I say this because I would like to obtain the birthday, but not the date of birth, I am not interested in obtaining the year of birth.
Is the below syntax correct for pickup full timestamp for elementor forms??
jQuery(document).ready(function($){
setTimeout(function(){
$(‘.flatpickr-input’).each(function(){ flatpickr( $(this)[0] ).set(‘dateFormat’, ‘Y/m/d g:i:s A’);}); }, 1000 );
});
The code works but like another code snippet, I found results in not being able to pick a year anymore and typing in the date manually does not work anymore either. So for a birthday, this solution does not work anymore, as you would need to go back to the year of birth with the month arrows.
Hi Alex,
Thanks for reporting this. I will update the code in the upcoming days to match the latest Elementor changes.