Question

以下是从jquery UI中包含jquery datepicker和i18n并创建自定义属性的代码。 datepicker工作并显示日历，但它不会将语言环境更改为法语。有没有其他方法我应该包括来自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);
}

Answer 1

$.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

Answer 2

导入*作为frCA来自＆＃34; components-jqueryui / ui / i18n / datepicker-fr-CA＆＃34 ;;

设置区域设置： $（this.element）.datepicker（$ datepicker.regional [区域]）;

如何在aurelia中使用JQuery UI datepicker更改语言环境？

2 个答案: