[英]How to localize jQuery UI DateRangePicker?
我正在使用jQuery UI DateRangePicker( 参考 )。 我想要这个daterangepicker提供3种语言(nl,fr和en)。
我将使用switch语句来设置日历的设置。
switch(curr_lang) {
case 'nl':
moment.locale('nl');
var daterangepicker = $("#search-vac-daterange").daterangepicker(
{
initialText : 'Selecteer datums',
dateFormat: 'd MM yy',
datepickerOptions: {
minDate: new Date(),
startDate: new Date(),
maxDate: '+2y'
},
presetRanges: [{
text: 'Vandaag',
dateStart: function() { return moment() },
dateEnd: function() { return moment() }
}, {
text: 'Volgende 7 dagen',
dateStart: function() { return moment() },
dateEnd: function() { return moment().add(7, 'days') }
}, {
text: 'Volgende 30 dagen',
dateStart: function() { return moment() },
dateEnd: function() { return moment().add(30, 'days') }
}, {
text: 'Volgende 6 maanden',
dateStart: function() { return moment()},
dateEnd: function() { return moment().add(6, 'months') }
}, {
text: 'Volgend jaar',
dateStart: function() { return moment() },
dateEnd: function() { return moment().add(1,'years') }
}]
}
);
break;
}
日期显示为
2019年1月18日-2019年2月17日
不会选择使用moment设置的语言环境,并且结果始终是英语(默认)。
注意:我没有设法使minDate和startDate与moment()一起使用,因此如果有人对此有所了解。 请帮帮我!
因此,我建议以下示例:
var cl = "en";
$(function() {
var drp = $("#search-vac-daterange").daterangepicker({
datepickerOptions: $.extend({
minDate: new Date(),
startDate: new Date(),
maxDate: '+2y'
}, $.datepicker.regional[cl])
});
var cdrp = drp.data("comiseoDaterangepicker");
console.log(drp, cdrp);
});
工作示例: https : //jsfiddle.net/Twisty/c5db9rng/20/
因此,这增加了本地化。 如果我们查看DatePicker示例中的步骤,则建议执行以下操作:
$( selector ).datepicker( $.datepicker.regional[ "fr" ] );
要么:
$( selector ).datepicker( "option", $.datepicker.regional[ "fr" ] );
每个本地化都包含在其自己的文件中,并在名称后附加语言代码,例如,法语的
jquery.ui.datepicker-fr.js
。 所需的本地化文件应包含在主日期选择器代码之后。 每个本地化文件都会将其选项添加到可用的本地化集中,并自动将其作为所有实例的默认设置应用。 本地化文件可以在https://github.com/jquery/jquery-ui/tree/master/ui/i18n中找到。
因此,要意识到这一点也很重要。 因此,对于您的代码,我建议以下几点。
$(function() {
switch (curr_lang) {
case 'nl':
moment.locale('nl');
var daterangepicker = $("#search-vac-daterange").daterangepicker({
initialText: 'Selecteer datums',
dateFormat: 'd MM yy',
datepickerOptions: $.extend({
minDate: new Date(),
startDate: new Date(),
maxDate: '+2y'
}, $.datepicker.regional[curr_lang]),
presetRanges: [{
text: 'Vandaag',
dateStart: function() {
return moment()
},
dateEnd: function() {
return moment()
}
}, {
text: 'Volgende 7 dagen',
dateStart: function() {
return moment()
},
dateEnd: function() {
return moment().add(7, 'days')
}
}, {
text: 'Volgende 30 dagen',
dateStart: function() {
return moment()
},
dateEnd: function() {
return moment().add(30, 'days')
}
}, {
text: 'Volgende 6 maanden',
dateStart: function() {
return moment()
},
dateEnd: function() {
return moment().add(6, 'months')
}
}, {
text: 'Volgend jaar',
dateStart: function() {
return moment()
},
dateEnd: function() {
return moment().add(1, 'years')
}
}]
});
break;
}
});
半工作示例: https : //jsfiddle.net/Twisty/c5db9rng/24/
该示例没有语言文件,因此不会给出正确的结果,但是代码按预期工作。
希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.