javascriptjquerywordpressdatepickerchild-theming

jQuery datepicker localization not working


To use the jQuery datepicker I have these scripts loaded for my Wordpress blog site:

<link rel='stylesheet' id='jquery-ui-css-css' href='http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css?ver=4.7.3' type='text/css' media='all' />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js?ver=4.7.3'></script>
<script type='text/javascript' src='https://code.jquery.com/ui/1.12.1/jquery-ui.js?ver=4.7.3'></script>
<script type='text/javascript' src='http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js?ver=4.7.3'></script>
<script type='text/javascript' src='http://mywebaddress.com/wp-content/themes/twentyseventeen-child/wpadverts/js/datepicker-ro.js?ver=4.7.3'></script>

and I have this piece of code for localized datepicker:

<script>
    $( function() {
        $('#adverts_eventDate').datepicker($.extend({}, $.datepicker.regional['ro'], {
            showButtonPanel : true,
            dateFormat : 'dd-mm-yy'
        }));
        } );
</script>

This code works, so I have a date picker, but it is not localized (for Romanian), it is in English. What is wrong with my code?

This is how those scripts are enqueued in my Wordpress child theme:

if ( !function_exists( 'wpadverts_plugin_custom_styles' ) ):
   function wpadverts_plugin_custom_styles() {
      wp_enqueue_script( 'jquery-min-js', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' );
      wp_enqueue_style( 'jquery-ui-css', 'http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');
      wp_enqueue_script( 'jquery-ui-js', 'https://code.jquery.com/ui/1.12.1/jquery-ui.js' );
      wp_enqueue_script( 'jquery-ui-i18n-min', 'http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js' );
      wp_enqueue_script( 'jquery-ui-datepicker-ro', get_stylesheet_directory_uri() . '/wpadverts/js/datepicker-ro.js', array( 'jquery' ) );
   }
endif;
add_action( 'wp_enqueue_scripts', 'wpadverts_plugin_custom_styles' );

UPDATE

Now my localized datepicker looks like this:

<script>
jQuery(function($){
    $.datepicker.regional['ro'] = {
        closeText: 'Închide',
        prevText: '&laquo; Luna precedentă',
        nextText: 'Luna următoare &raquo;',
        currentText: 'Azi',
        monthNames: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie',
    'Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
        monthNamesShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun',
    'Iul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        dayNames: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă'],
        dayNamesShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
        dayNamesMin: ['Du','Lu','Ma','Mi','Jo','Vi','Sâ'],
        weekHeader: 'Săpt',
        dateFormat: 'dd.mm.yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['ro']);
});

$( '#adverts_eventDate' ).datepicker( $.datepicker.regional['ro'] );

</script>

Solution

  • Include this and try

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>

    Fiddle

    using your JS

     $(function() {
       $('#adverts_eventDate').datepicker($.extend({}, $.datepicker.regional['ro'], {
         showButtonPanel: true,
         dateFormat: 'dd-mm-yy'
       }));
     });