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

Published
Categorized as WordPress

By janoshke

Web developer and IT consultant. Freelancer with full respect for OpenCart and WordPress. Gamer, (ex)drummer and parent.

Leave a Reply