I am using javascript date range picker ponent (/). Localization is well handled on all levels except in one case I do not know how to correctly set it up.

On the screenshot you can see that everything is in german, except for the one marked with arrow.

This value is set by

locale: {
  format: 'MMMM D, YYYY',

I do not know how I can translate the MMMM part.

Here is the whole daterangepicker code.

        function ranges_locale($langcode) {
          var _default_ranges = {
            next_7_days: [moment(), moment().add(7, 'days')],
            tomorrow: [moment().add(1, 'days'), moment().add(1, 'days')],
            today: [moment(), moment()],
            yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            last_7_days: [moment().subtract(6, 'days'), moment()],
            last_30_days: [moment().subtract(29, 'days'), moment()],
            this_month: [moment().startOf('month'), moment().endOf('month')],
            last_month: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          };

          var _ranges = {
            'en': {
              'Next 7 Days': _default_ranges.next_7_days,
              'Tomorrow': _default_ranges.tomorrow,
              'Today': _default_ranges.today,
              'Yesterday': _default_ranges.yesterday,
              'Last 7 Days': _default_ranges.last_7_days,
              'Last 30 Days': _default_ranges.last_30_days,
              'This Month': _default_ranges.this_month,
              'Last Month': _default_ranges.last_month,
            },
            'de': {
              'Nächste 7 Tage': _default_ranges.next_7_days,
              'Morgen': _default_ranges.tomorrow,
              'Heute': _default_ranges.today,
              'Gestern': _default_ranges.yesterday,
              'Letzte 7 Tage': _default_ranges.last_7_days,
              'Letzte 30 Tage': _default_ranges.last_30_days,
              'Dieser Monat': _default_ranges.this_month,
              'Letzter Monat': _default_ranges.last_month,
            }
          };


        target.daterangepicker({
          "opens": "center",
          "maxSpan": {
            "days": 366
          },
          locale: {
            format: 'MMMM D, YYYY',
            applyLabel: tc('Apply'),
            cancelLabel: tc('Cancel'),
            customRangeLabel: tc('Custom Range'),
            daysOfWeek: [
              tc('Su'), tc('Mo'), tc('Tu'), tc('We'), tc('Th'), tc('Fr'), tc('Sa')
            ],
            monthNames: [
              tc('January'), tc('February'), tc('March'), tc('April'), tc('May'), tc('June'), tc('July'), tc('August'), tc('September'), tc('October'), tc('November'), tc('December')
            ],
            firstDay: 1
          },
          ranges: ranges_locale(currentLanguage),
          "alwaysShowCalendars": true,
          "startDate": target.attr('start-date'),
          "endDate": target.attr('end-date'),
        });

Thank you.

I am using javascript date range picker ponent (https://www.daterangepicker./). Localization is well handled on all levels except in one case I do not know how to correctly set it up.

On the screenshot you can see that everything is in german, except for the one marked with arrow.

This value is set by

locale: {
  format: 'MMMM D, YYYY',

I do not know how I can translate the MMMM part.

Here is the whole daterangepicker code.

        function ranges_locale($langcode) {
          var _default_ranges = {
            next_7_days: [moment(), moment().add(7, 'days')],
            tomorrow: [moment().add(1, 'days'), moment().add(1, 'days')],
            today: [moment(), moment()],
            yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            last_7_days: [moment().subtract(6, 'days'), moment()],
            last_30_days: [moment().subtract(29, 'days'), moment()],
            this_month: [moment().startOf('month'), moment().endOf('month')],
            last_month: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          };

          var _ranges = {
            'en': {
              'Next 7 Days': _default_ranges.next_7_days,
              'Tomorrow': _default_ranges.tomorrow,
              'Today': _default_ranges.today,
              'Yesterday': _default_ranges.yesterday,
              'Last 7 Days': _default_ranges.last_7_days,
              'Last 30 Days': _default_ranges.last_30_days,
              'This Month': _default_ranges.this_month,
              'Last Month': _default_ranges.last_month,
            },
            'de': {
              'Nächste 7 Tage': _default_ranges.next_7_days,
              'Morgen': _default_ranges.tomorrow,
              'Heute': _default_ranges.today,
              'Gestern': _default_ranges.yesterday,
              'Letzte 7 Tage': _default_ranges.last_7_days,
              'Letzte 30 Tage': _default_ranges.last_30_days,
              'Dieser Monat': _default_ranges.this_month,
              'Letzter Monat': _default_ranges.last_month,
            }
          };


        target.daterangepicker({
          "opens": "center",
          "maxSpan": {
            "days": 366
          },
          locale: {
            format: 'MMMM D, YYYY',
            applyLabel: tc('Apply'),
            cancelLabel: tc('Cancel'),
            customRangeLabel: tc('Custom Range'),
            daysOfWeek: [
              tc('Su'), tc('Mo'), tc('Tu'), tc('We'), tc('Th'), tc('Fr'), tc('Sa')
            ],
            monthNames: [
              tc('January'), tc('February'), tc('March'), tc('April'), tc('May'), tc('June'), tc('July'), tc('August'), tc('September'), tc('October'), tc('November'), tc('December')
            ],
            firstDay: 1
          },
          ranges: ranges_locale(currentLanguage),
          "alwaysShowCalendars": true,
          "startDate": target.attr('start-date'),
          "endDate": target.attr('end-date'),
        });

Thank you.

• javascript
• translation
• date-formatting
• daterangepicker

Share Improve this question Follow edited Jul 19, 2021 at 12:06 zanvidmar asked Jul 19, 2021 at 8:08 zanvidmarzanvidmar 42166 silver badges1414 bronze badges 7

• What ranges_locale(currentLanguage) does exactly? Can you show me the code? – Giovanni Esposito Commented Jul 19, 2021 at 10:05
• @GiovanniEsposito I added requested code into question description (it was too long for ment). It is jut a "mapping" function that return different labels for preselected time ranges. – zanvidmar Commented Jul 19, 2021 at 12:08
• @zanvidmar can we translate numerical date as well? thanks in advance – Sachin Jagtap Commented Feb 27, 2024 at 8:08
• @SachinJagtap can you plese be more specific? What is numerical date? Do you mean format (format: 'MMMM D, YYYY',)? – zanvidmar Commented Feb 27, 2024 at 14:21
• @zanvidmar no, I mean the date (1,2,3, 4, 5,....31) to respective language. – Sachin Jagtap Commented Feb 29, 2024 at 9:52

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 4

Date range picker is using moment under the hood so you can do some customisation to replace the english month to german month.

Play the code below to see if it can do what you want:

<html>

<head>
    <script type="text/javascript" src="https://cdn.jsdelivr/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr/npm/daterangepicker/daterangepicker.css" />
</head>

<body>

    <input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />

    <script>
        
        $(function () {

            // update locale to de and customize the MMM, MMMM translation
            moment.updateLocale("de", {
                months : ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
                monthsShort : ['Jan', 'Feb', 'März', 'Apr', 'Mai', 'Juni', 'Juli', 'Aug', 'Sept', 'Okt', 'Nov', 'Dez']
            });
        
            $('input[name="daterange"]').daterangepicker({
                "opens": "center",
                "maxSpan": {
                    "days": 366
                },
                locale: {
                    format: 'MMMM D, YYYY',
                    applyLabel: tc('Apply'),
                    cancelLabel: tc('Cancel'),
                    customRangeLabel: tc('Custom Range'),
                    daysOfWeek: [
                        tc('Su'), tc('Mo'), tc('Tu'), tc('We'), tc('Th'), tc('Fr'), tc('Sa')
                    ],
                    monthNames: [
                        tc('January'), tc('February'), tc('March'), tc('April'), tc('May'), tc('June'), 
                        tc('July'), tc('August'), tc('September'), tc('October'), tc('November'), tc('December')
                    ],
                    firstDay: 1
                },
                // ranges: ranges_locale(currentLanguage),
                "alwaysShowCalendars": true,
                // "startDate": today, //target.attr('start-date'),
                // "endDate": target.attr('end-date'),
            });
        })

        const germanMapping = {
            'Su': 'So',
            'Mo': 'Mo',
            'Tu': 'Di',
            'We': 'Mi',
            'Th': 'Do',
            'Fr': 'Fr',
            'Sa': 'Sa',

            'January': 'Januar',
            'February': 'Februar',
            'March': 'März',
            'April': 'April',
            'May': 'Mai',
            'June': 'Juni',
            'July': 'Juli',
            'August': 'August',
            'September': 'September',
            'October': 'Oktober',
            'November': 'November',
            'December': 'Dezember',

            "Apply": "Anwenden",
            "Cancel": "Stornieren"
        }
        const tc = (val) => germanMapping[val]
        
    </script>
</body>

</html>

Since DataRangePicker manages date using moment, if you want to change bottom label language you should add this import:

import "moment/locale/de";

and the result is:

Here a codesandbox example.

I didn't find a direct solution, but a workaround.

What if you change the months with jQuery? You get somehow the current language (one way is probably with <html lang="en">) and then change the month string.

It's not the nicest solution, but it should work.