How to change locale using JQuery UI datepicker in aurelia?

Question

Following is the code where jquery datepicker and i18n is included from jquery UI and a custom attribute is created. The datepicker works and shows the calendar, but it doesnt change the locale to french. Is there any other way I should be including the locale files from jquery UI i18n folder.

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

import * as frCA from "components-jqueryui/ui/i18n/datepicker-fr-CA";

Set locale with: $(this.element).datepicker($.datepicker.regional[locale]);