如何翻译 "Date Range Picker" 中月份格式为字符串的日期？

Question

我正在使用 javascript 日期范围选择器组件 (https://www.daterangepicker.com/)。本地化在所有级别上都得到了很好的处理，除了在一种情况下我不知道如何正确设置它。

在屏幕截图上，您可以看到所有内容都是德语，除了标有箭头的那个。

此值由

设置

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

我不知道如何翻译 MMMM 部分。

这是整个日期范围选择器代码。

        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'),
        });

谢谢。

Answer 1

我没有找到直接的解决方案，但找到了解决方法。

如果用 jQuery 更改月份会怎样？您以某种方式获得当前语言（一种方法可能是 <html lang="en">），然后更改月份字符串。

这不是最好的解决方案，但应该可行。

Answer 2

日期范围选择器正在后台使用时刻，因此您可以customisation将英语月份替换为德语月份。

播放下面的代码，看看它是否能达到你想要的效果：

<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>

Answer 3

由于 DataRangePicker 使用 moment 管理日期，如果您想更改底部标签语言，您应该添加此导入：

import "moment/locale/de";

结果是：

Here 一个 codesandbox 示例。

如何翻译 "Date Range Picker" 中月份格式为字符串的日期？

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

javascript

translation

date-formatting

daterangepicker