Translate datepicker field in Elementor form widget

For some reason WPML is unable to translate the date picker within Elementor form widget so here’s a workaround for this issue.

Thanks to RiKaZaRai for the following code which needs to be pasted in HTML widget on the same page where the untranslated form exists:

<script>
        jQuery( document ).ready( function( $ ){
                    function waitForFlatpicker( callback ) {
                        if ( typeof window.flatpickr !== 'function' ) {
                            setTimeout( function() { waitForFlatpicker( callback ) });
                        }
                        callback();
                    }
                    waitForFlatpicker( function(){
                    flatpickr.l10ns.default.firstDayOfWeek = 1;
                        flatpickr.l10ns.fr = {
                            weekdays: {
                                shorthand: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
                                longhand: [
                                    "Dimanche",
                                    "Lundi",
                                    "Mardi",
                                    "Mercredi",
                                    "Jeudi",
                                    "Vendredi",
                                    "Samedi",
                                ],
                            },
                            months: {
                                shorthand: [
                                    "Jan",
                                    "Fév",
                                    "Mar",
                                    "Avr",
                                    "Mai",
                                    "Juin",
                                    "Jui",
                                    "Aou",
                                    "Sep",
                                    "Oct",
                                    "Nov",
                                    "Déc",
                                ],
                                longhand: [
                                    "Janvier",
                                    "Février",
                                    "Mars",
                                    "Avril",
                                    "Mai",
                                    "Juin",
                                    "Juillet",
                                    "Août",
                                    "Septembre",
                                    "Octobre",
                                    "Novembre",
                                    "Décembre",
                                ],
                            },
                            rangeSeparator: " até ",
                        };
                        //set translations
                        flatpickr.localize(flatpickr.l10ns.fr);
                        flatpickr('.flatpickr-input');
                        //set format
                        setTimeout( function(){
                        $('.flatpickr-input').each(function(){ flatpickr( $(this)[0] ).set('dateFormat', 'd/m/Y');});
                        }, 1000 );
                    });
        });
        </script>

If you face the design differences in the datepicker for your languages on website (English and French in my case) then uncheck the option “Native HTML5”