如何在“日期范围选择器”中转换日期，其中月份格式为字符串？
[英]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/ ).
我正在使用 javascript 日期范围选择器组件 ( 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.在屏幕截图上，您可以看到所有内容都是德语，除了标有箭头的那个。
This value is set by该值由
locale: {
format: 'MMMM D, YYYY',
I do not know how I can translate the MMMM part.我不知道如何翻译MMMM部分。
Here is the whole daterangepicker code.这是整个 daterangepicker 代码。
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.谢谢你。
3 个解决方案
解决方案1
1 已采纳 2021-07-19 10:08:38
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>
解决方案2
1 2021-07-19 12:42:58
解决方案3
0 2021-07-19 09:34:39
I didn't find a direct solution, but a workaround.我没有找到直接的解决方案，而是一种解决方法。
What if you change the months with jQuery?如果您使用 jQuery 更改月份会怎样？ You get somehow the current language (one way is probably with <html lang="en"> ) and then change the month string.您以某种方式获得当前语言（一种方法可能是使用<html lang="en"> ），然后更改月份字符串。
It's not the nicest solution, but it should work.这不是最好的解决方案，但它应该有效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.