javascriptjquerydatetimepickerjquerydatetimepicker

jquery dateTimePicker set language


Probably I understand the documentation completely wrong. I am trying to set the datetimepicker to german. As written in the official docs I simply added the terms for months, dayOfWeekShort and dayOfWeek, directly into the datetimepicker.

Obvously I am missing the important piece of puzzle.

 $('#picker').datetimepicker({
        datepicker: true,
            format: 'd.m.Y H:i',
            step: 30,
            lang: 'de',
            i18n: {
                de: { // German
                    months: [
                        'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
                    ],
                    dayOfWeekShort: [
                        "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"
                    ],
                    dayOfWeek: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]
                },
            },
            closeOnDateSelect: true,
        })
        
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <!-- jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    
    <!-- date time picker -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">

</head>

<body>
    <input id="picker">

</body>

</html>


Solution

  • Obvously I am missing the important piece of puzzle.

    Yes - the one where you actually tell the datepicker, which locale you want it to use:

    $.datetimepicker.setLocale('de');
    

    https://xdsoft.net/jqplugins/datetimepicker/#i18n