In this topic we are going to see how to fix through JavaScript code, the problem of the calendar displayed in the date field of the Elementor Pro Form widget.

1. The first problem arises because North American calendars continue to use Sunday as the first day of the week, while European calendars consider Monday as the first day.
2. The second problem is that in this calendar the months and days of the week are in English.
3. And the third problem is that when we select a date in the calendar it returns it in American date format Y-m-d (Year-month-day).

Elementor Pro uses the JavaScript Flatpickr library to implement a datepicker that facilitates the date section through a calendar, by default this library is in English, sets Sunday as the first day of the week and returns the date with amarican format.

What is a datepicker?

Datepikers are elements that help the user to select a date in a simple way through a visual calendar.

What is Flatpickr?

Flatpickr is a library dedicated to the creation of datepickers that does not depend on JQuery UI Datepicker, is lighter and is the one used by Elementor Pro to improve the selection of dates in the date fields of the Form widget.

Solution

Let’s see how to insert the code in our website.

<script>
   jQuery(document).ready(function($){
     flatpickr.l10ns.default.firstDayOfWeek = 1; // Establecer primer día lunes
		 flatpickr.l10ns.default.weekdays = {
            shorthand: [ 'Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab' ],
            longhand : [ 'Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
     };
		 flatpickr.l10ns.default.months = {
            shorthand: [ 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic' ],
            longhand : [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ]
     };
		setTimeout( function(){
			    $('.elementor-date-field').each(function(){flatpickr( $(this)[0] ).set('dateFormat', 'd/m/Y');});
		}, 1000 );
   });
</script>

1. Click on the COPY CODE button above.
2. In the WordPress admin panel navigate to Elementor > Custom Code.
3. Click on the Add new button.
4. Type a title and paste the code into the box below using CTRL+V (Windows) or CMD+V (Mac). You can also right-click and select Paste.
5. Click on the Publish button.
6. In the pop-up window set the display conditions, by default All site.
7. Click on Save & Close.

Now the calendar in the Date field will be displayed correctly.