CODEWITHSUNDEEP
javascriptjqueryjquery-uitranslation
Klipp Ohei
Klipp Ohei

Reputation: 385

Jquery datepicker german

I have implemented Jquery-UI now and it works fine but I want to have all in german, for example the datepicker.

I tried already to change the strings in the jquery-ui.js:

this._dayOverClass = "ui-datepicker-days-cell-over"; // The name of the day hover marker class
this.regional = []; // Available regional settings, indexed by language code
this.regional[""] = { // Default regional settings
    closeText: "Done", // Display text for close link
    prevText: "Prev", // Display text for previous month link
    nextText: "Next", // Display text for next month link
    currentText: "Today", // Display text for current month link
    monthNames: ["Januar","Februar","März","April","Mai","Juni",
        "Juli","August","September","Oktober","November","Dezember"], // Names of months for drop-down and formatting
    monthNamesShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"], // For formatting
    dayNames: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Dienstag", "Freitag", "Samstag"], // For formatting
    dayNamesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"], // For formatting
    dayNamesMin: ["So","Mo","Di","Mi","Do","Fr","Sa"], // Column headings for days starting at Sunday
    weekHeader: "KW", // Column header for week of the year
    dateFormat: "dd.mm.yy", // See format options on parseDate
    firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
    isRTL: false, // True if right-to-left language, false if left-to-right
    showMonthAfterYear: false, // True if the year select precedes month, false for month then year
    yearSuffix: "" // Additional text to append to the year in the month headers
};

This didn't work, so I tried to insert a script to the index.php:

<script>$.datepicker.setDefaults($.datepicker.regional['de']);</script>

How can I get those things to german?

Upvotes: 4

Views: 8979

Answers (2)

depperm
depperm

Reputation: 10756

Another option if you want everything included

$(function() {
    $.datepicker.regional['de'] = {
		closeText: 'Done',
		prevText: 'Prev',
		nextText: 'Next',
		currentText: 'heute',
		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'],
		weekHeader: 'KW',
		dateFormat: 'dd.mm.yy',
		firstDay: 0,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: ''};
        $("#StartDate").datepicker( $.datepicker.regional[ "de" ] );
        $('#StartDate').datepicker('option', 'dateFormat', 'yy-mm-dd');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"></link>
<input type='text' id='StartDate' />

Upvotes: 0

Jonny Vince
Jonny Vince

Reputation: 487

just include the right language.js

-> https://github.com/jquery/jquery-ui/tree/master/ui/i18n

for german: -> https://raw.githubusercontent.com/jquery/jquery-ui/master/ui/i18n/datepicker-de.js

an then call this language:

$( selector ).datepicker( $.datepicker.regional[ "de" ] )

Upvotes: 2

Related Questions