如何在 aurelia 中使用 JQuery UI datepicker 更改语言环境?
How to change locale using JQuery UI datepicker in aurelia?
以下是 jquery datepicker 和 i18n 的代码,其中包含 jquery UI 并创建自定义属性。日期选择器可以工作并显示日历,但不会将语言环境更改为法语。
有没有其他方法我应该包括 jquery UI i18n 文件夹中的语言环境文件。
import $ from "jquery";
import {datepicker} from "components-jqueryui";
import {EventAggregator} from "aurelia-event-aggregator";
import {inject, customAttribute} from "aurelia-framework";
import {i18n} from "components-jqueryui";
@customAttribute("datepicker")
@inject(Element, EventAggregator)
export class DatePicker {
constructor(element, eventAggregator) {
this.element = element;
// Handle to Aurelia pub/sub events
this.eventAggregator = eventAggregator;
}
attached() {
$(this.element).datepicker($.datepicker.regional["fr"]);
// $.datepicker.setDefaults(
// $.extend($.datepicker.regional["fr"])
// );
$(this.element).datepicker({dateFormat: "yy-mm-dd", onClose: function fct() { this.focus(); }})
.on("change", e => fireEvent(e.target, "input"));
this.eventAggregator.subscribe("event:locale:changed", (locale) => {
$(this.element).datepicker($.datepicker.regional["fr"]);
// $.datepicker.setDefaults(
// $.extend($.datepicker.regional["fr"])
// );
});
}
detached() {
$(this.element).datepicker("destroy")
.off("change");
}
}
function createEvent(name) {
let event = document.createEvent("Event");
event.initEvent(name, true, true);
return event;
}
function fireEvent(element, name) {
let event = createEvent(name);
element.dispatchEvent(event);
}
$.datepicker
有一个不同的界面用于更改语言环境,例如:
$(this.element).datepicker('options', 'new-locale');
另外,您需要导入相应的汉化脚本:
<script src="i18n/datepicker-fr.js"></script>
...或等效的 ES6 导入。您的 import {i18n} from "components-jqueryui";
可能会完成第二部分。
从 "components-jqueryui/ui/i18n/datepicker-fr-CA" 导入 * 作为 frCA;
设置语言环境:
$(this.element).datepicker($.datepicker.regional[locale]);
以下是 jquery datepicker 和 i18n 的代码,其中包含 jquery UI 并创建自定义属性。日期选择器可以工作并显示日历,但不会将语言环境更改为法语。 有没有其他方法我应该包括 jquery UI i18n 文件夹中的语言环境文件。
import $ from "jquery";
import {datepicker} from "components-jqueryui";
import {EventAggregator} from "aurelia-event-aggregator";
import {inject, customAttribute} from "aurelia-framework";
import {i18n} from "components-jqueryui";
@customAttribute("datepicker")
@inject(Element, EventAggregator)
export class DatePicker {
constructor(element, eventAggregator) {
this.element = element;
// Handle to Aurelia pub/sub events
this.eventAggregator = eventAggregator;
}
attached() {
$(this.element).datepicker($.datepicker.regional["fr"]);
// $.datepicker.setDefaults(
// $.extend($.datepicker.regional["fr"])
// );
$(this.element).datepicker({dateFormat: "yy-mm-dd", onClose: function fct() { this.focus(); }})
.on("change", e => fireEvent(e.target, "input"));
this.eventAggregator.subscribe("event:locale:changed", (locale) => {
$(this.element).datepicker($.datepicker.regional["fr"]);
// $.datepicker.setDefaults(
// $.extend($.datepicker.regional["fr"])
// );
});
}
detached() {
$(this.element).datepicker("destroy")
.off("change");
}
}
function createEvent(name) {
let event = document.createEvent("Event");
event.initEvent(name, true, true);
return event;
}
function fireEvent(element, name) {
let event = createEvent(name);
element.dispatchEvent(event);
}
$.datepicker
有一个不同的界面用于更改语言环境,例如:
$(this.element).datepicker('options', 'new-locale');
另外,您需要导入相应的汉化脚本:
<script src="i18n/datepicker-fr.js"></script>
...或等效的 ES6 导入。您的 import {i18n} from "components-jqueryui";
可能会完成第二部分。
从 "components-jqueryui/ui/i18n/datepicker-fr-CA" 导入 * 作为 frCA;
设置语言环境: $(this.element).datepicker($.datepicker.regional[locale]);