jQuery Datepicker displays wrong language until interection with the calendar

Question

jQuery Datepicker displays wrong language until interection with the calendar

Peter K.

2021年4月4日 16:04

In a totally custom page, written as a PHP snippet using Woody Snippets plugin, I need to use a jQuery datepicker to select a date.

I imported the necessary files correctly, and also called and set up the datepicker correctly. Yesterday, I attached the datepicker to a hidden input field, so that when I clicked on an icon, the calendar would float in place, and everything was fine, even the localization, although I hadn't taken any measures for the localization of the calendar (importing the i18n files etc)...

Today, I had to change the page's layout a bit, so I had to make the calendar show from the beginning (inline). According to the demo page, in order to put the datepicker inline, all you have to do is attach it to a div instead of an input field.

The datepicker indeed turned into an inline element, but the localization went away... The initial language is English, until I interact in any way with the calendar (go back or forth a month, or pick a date, etc). Once I do that, the localization turns into my site's language!

What's more crazy is that this situation continued even after I specifically imported and set up the localization.

script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js integrity=sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ== crossorigin=anonymous/script
script src=https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js integrity=sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA== crossorigin=anonymous/script
script src=https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js integrity=sha512-zZ27MiE6yuwkKbHnJ/7ATQF/7l+Jwk5jSxgmLJ1SS5QJexaYswmP3OKBPDVMfM8TlSOudAKHTWH2UtS+0LDddw== crossorigin=anonymous/script
script
$(document).ready(function() {
    $('#frontpages-date-filter').datepicker($.extend({},
        $.datepicker.regional['el'], {
            dateFormat: 'yymmdd',
            minDate: new Date({$min['y']}, {$min['m']}, {$min['d']}),
            maxDate: new Date({$max['y']}, {$max['m']}, {$max['d']}),
            onSelect: function(dateText) {
                window.location.href = location.protocol + '//' + location.host + location.pathname + '?date=' + dateText;
            }
        }
    ));
});
/script

Exactly the same code works fine right from the start in the following JSFiddle

From what I've searched so far, it most likely has to do with WP v4.6+ where localization is automatically added to jQuery, but no matter what I've tried, I haven't been able to make the inline datepicker load localized without having to interact with it in any way!

BTW, I had noticed the exact same behavior, and even had recorded a short video for the developers of ACF, thinking it had to do with their plugin, but they responded it wasn't due to their plugin, so as it was in the Admin side, I didn't bother losing time to debug it further. But this time, the page is in the public side, so it has to be fixed!

Any help will be very much appreciated. Thanks in advance.

Topic datepicker localization jquery Wordpress

Category Web

Peter K. · Accepted Answer · 2021年4月4日 16:04

This must have been a conflict in my site. TBH, I wasn't able to spot the conflict, but I was able to circumvent it by setting the necessary lang strings just before datepicker's initiation like so:

$(function() {
    $.datepicker.regional['el'] = {
        closeText: 'Κλείσιμο',
        prevText: 'Προηγούμενος',
        nextText: 'Επόμενος',
        currentText: 'Σήμερα',
        monthNames: ['Ιανουάριος', 'Φεβρουάριος', 'Μάρτιος', 'Απρίλιος', 'Μάιος', 'Ιούνιος', 'Ιούλιος', 'Αύγουστος', 'Σεπτέμβριος', 'Οκτώβριος', 'Νοέμβριος', 'Δεκέμβριος'],
        monthNamesShort: ['Ιαν', 'Φεβ', 'Μαρ', 'Απρ', 'Μαι', 'Ιουν', 'Ιουλ', 'Αυγ', 'Σεπ', 'Οκτ', 'Νοε', 'Δεκ'],
        dayNames: ['Κυριακή', 'Δευτέρα', 'Τρίτη', 'Τετάρτη', 'Πέμπτη', 'Παρασκευή', 'Σάββατο'],
        dayNamesShort: ['Κυρ', 'Δευ', 'Τρι', 'Τετ', 'Πεμ', 'Παρ', 'Σαβ'],
        dayNamesMin: ['Κ', 'Δ', 'Τ', 'Τ', 'Π', 'Π', 'Σ'],
        weekHeader: 'Εβδ',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };

    $.datepicker.setDefaults($.datepicker.regional['el']);

    $('#frontpages-date-filter').datepicker();
});

jQuery Datepicker displays wrong language until interection with the calendar

About