如何在“日期范围选择器”中转换日期，其中月份格式为字符串？

如何解决如何在“日期范围选择器”中转换日期，其中月份格式为字符串？

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

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

该值由

设置

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

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

这是整个 daterangepicker 代码。

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

谢谢。

解决方法

日期范围选择器在幕后使用时刻，因此您可以执行一些 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','Apr','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>

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

import "moment/locale/de";

结果是：

Here 代码沙盒示例。

我没有找到直接的解决方案，而是一种解决方法。

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

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