CODEWITHSUNDEEP
javascriptjquerywordpressdatepickerchild-theming
Iurie
Iurie

Reputation: 2248

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>

Upvotes: 1

Views: 4357

Answers (2)

Deep 3015
Deep 3015

Reputation: 10075

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'
   }));
 });

Upvotes: 2

Toxide82
Toxide82

Reputation: 277

Try the below , example how you can do localization by yourself. 

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']);
});

Upvotes: 1

Related Questions