Search code examples
javascripttranslationdate-formattingdaterangepicker

How to translate date in "Date Range Picker" where month is formated as string?

I am using javascript date range picker component (https://www.daterangepicker.com/). 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.

enter image description here

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.

Solution

  • 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.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/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>