JQuery Datepicker Localization German

Question

First off, I want to state, that I've read a lot of threads on this Topic but none solved my Problem.

So I need a german JQuery Datepicker. So I set the regional attribute in the Datepicker:

<script>
    $(function() {
        $("#datepicker").datepicker({
            numberOfMonths : 3,
            showButtonPanel : true,
            altField : "#datepicker_input",
            dateFormat : "dd-mm-yy"
        }, $.datepicker.regional['de']);
    });
</script>

But this doesn't seem to work. I also looked for a german JQuery UI but didn't find anything.

Could you give me a startingpoint here please?

Chanteuse

Go through jQuery UI's Datepicker options. You should find everything necessary for localization to German. – Issuance

@Issuance I did and the regional['de'] was the result. – Chanteuse

Answer 1

Check whether you have included the localization js file for the german

if you not means include this

<script type="text/javascript"
        src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js">
</script>

and code should be

 $(function() {
  $('#datepicker').datepicker({
       prevText: '<zurück', prevStatus: '',
        prevJumpText: '<<', prevJumpStatus: '',
        nextText: 'Vor>', nextStatus: '',
        nextJumpText: '>>', nextJumpStatus: '',
        currentText: 'heute', currentStatus: '',
        todayText: 'heute', todayStatus: '',
        clearText: '-', clearStatus: '',
        closeText: 'schließen', closeStatus: '',
        monthNames: ['Januar','Februar','März','April','Mai','Juni',
        'Juli','August','September','Oktober','November','Dezember'],
        monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
        'Jul','Aug','Sep','Okt','Nov','Dez'],
        dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
        dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
        dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
      showMonthAfterYear: false,
      showOn: 'both',
      buttonImage: 'media/img/calendar.png',
      buttonImageOnly: true,
      dateFormat:'d MM, y'
    } 
  );

});

Demo

Featherstitch

Thank you for your answer, this really changed my DatePicker localization. But it appears that it's some chinese Language. I included the above i18n.js. But I used my code. Seems a bit weird. Also your demo is in Chinese. Really weird ... – Chanteuse

Even if I had preferred something more automatic, this works pretty perfect. Thank you very much for your effort. – Chanteuse

This code is not working! I still see chinese characters! – Plattdeutsch

Answer 2

It is neccessary to combine the already given answeres here like this:

Add to the Header:

<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"></script>

and to your Code:

$.datepicker.setDefaults($.datepicker.regional["de"]);

That's it!

Vice

Answer 3

To hide Chinese chars from muthu's answer, add inside the options:

  weekHeader: "W",
  yearSuffix: ""

Grote

Answer 4

Ok, a little bit late, but perhaps someone needs it, try this:

$.datepicker.setDefaults($.datepicker.regional["de"]);

Selfcontained

Answer 5

The original code

$("#datepicker").datepicker({
    numberOfMonths : 3,
    showButtonPanel : true,
    altField : "#datepicker_input",
    dateFormat : "dd-mm-yy"
}, $.datepicker.regional['de']);

should be fixed to the following

$("#datepicker").datepicker($.extend({}, $.datepicker.regional["de"], {
    numberOfMonths : 3,
    showButtonPanel : true,
    altField : "#datepicker_input",
    dateFormat : "dd-mm-yy"
}));

Cyn

Answer 6

Eclose the "$.datepicker.setDefaults" call within:

jQuery(function ($) { initialization; });

Final result:

jQuery(function ($) {
    $.datepicker.setDefaults($.datepicker.regional["de"]);
});

Encephalogram