如何在 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"; 可能会完成第二部分。

完整示例在这里: https://jqueryui.com/datepicker/#localization

从 "components-jqueryui/ui/i18n/datepicker-fr-CA" 导入 * 作为 frCA;

设置语言环境: $(this.element).datepicker($.datepicker.regional[locale]);