Localization

SVAR library provides the possibility to present interfaces of controls in different languages. It is possible to localize Calendar and controls that contain calendars: RangeCalendar, DatePicker and DateRangePicker, set time format for TimePicker and change the locale of buttons' labels in modal boxes.

Using in-built locales

There are 9 locales provided:

• en-EN - American English - the default locale
• cn-CN - Chinese
• de-DE - German
• es-ES - Spanish
• fr-FR - French
• it-IT - Italian
• ja-JA - Japanese
• pt-PT - Portuguese
• ru-RU - Russian

Locale packages are stored in a separate repository. The default locale is English, it has the following structure:

const calendar = {
    monthFull: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
    ],
    monthShort: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
    ],
    dayFull: [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
    ],
    dayShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    hours: "Hours",
    minutes: "Minutes",
    done: "Done",
    clear: "Clear",
    today: "Today",
    am: ["am", "AM"],
    pm: ["pm", "PM"],

    weekStart: 7,
    clockFormat: 24,
};

const core = {
    ok: "OK",
    cancel: "Cancel",
};

const formats = {
    timeFormat: "%H:%i",
    dateFormat: "%m/%d/%Y",
};

To use a different locale, you need to include it on a page of your application together with the Locale object, e.g. the German locale is added like this:

<script>
    import { Locale } from "wx-svelte-core";
    import { de } from "wx-core-locales";
</script>

Related sample: Locales

Changing locale of a control

To apply a different locale to a control, you should:

• import the control together with the Locale object:

<script>
    import { Calendar, Locale } from "wx-svelte-core";
</script>

• include the necessary locale package on a page. In the example below the German locale is applied to a calendar:

<script>
    import { Calendar, Locale } from "wx-svelte-core";
    import { de } from "wx-core-locales";
</script>

• wrap the control you want to localize in the <Locale> tags and use the words property to set the language:

<Locale words={de}>
    <Calendar />
</Locale>

Related sample: Locales

Read more on Calendar localization.

Using different locales for separate instances

You may need to use several instances of a control with different locales. For this you need to:

• include the necessary locale package on a page. In the example below German and Chinese locales are applied to calendars:

<script>
    import { Calendar, Locale } from "wx-svelte-core";
    import { de, cn } from "wx-core-locales";
</script>

• wrap the necessary control's instance in the <Locale> tags and use the words property to set the locale of choice:

<Locale words={de}>
    <Calendar value={new Date(2022, 2, 18)} />
</Locale>
<Locale words={cn}>
    <Calendar value={new Date(2022, 2, 18)} />
</Locale>

Related sample: Calendar

Setting time format for Timepicker

You can localize the format of displaying time in the Timepicker input. Check the details in the related guide.

Setting date format for DatePicker and DateRangePicker

You can localize the format of displaying dates in the inputs of DatePicker and DateRangePicker controls. Check the details in the related guides for DatePicker and DateRangePicker.

Date and time format specification

The table below provides the characters used for setting date and time format in the SVAR Core components:

Character	Description	Example
%d	the day as a number with the leading zero	from 01 to 31
%j	the day as a number	from 1 to 31
%D	the short name of the day	Su Mo Tu
%l	the full name of the day	Sunday Monday Tuesday
%m	the month as a number with the leading zero	from 01 to 12
%n	the month as a number	from 1 to 12
%M	the short name of the month	Jan Feb Mar
%F	the full name of the month	January February March
%y	the year as a number, 2 digits	24
%Y	the year as a number, 4 digits	2024
%h	the hour based on the 12-hour clock with the leading zero	from 01 to 12
%g	the hour based on the 12-hour clock	from 1 to 12
%H	the hour based on the 24-hour clock with leading zero	from 00 to 23
%G	the hour based on the 24-hour clock	from 0 to 23
%i	the minute as a number with the leading zero	from 01 to 59
%s	the second as a number with leading zero	from 01 to 59
%a	am or pm	am (for time from midnight till noon) and pm (for time from noon till midnight)
%A	AM or PM	AM (for time from midnight till noon) and PM (for time from noon till midnight)
%S	milliseconds	137
%W	the week number with the leading zero	from 01 to 52/53
%c	date and time in the ISO-8601 date format	2024-10-04T05:04:09

For example, to set the 1st of October, 2024 12:30 as 2024-10-01 12:30, you need to provide the following string:
"%Y-%m-%d-%H:%i".

Changing locale of a modal box

The built-in locales include the core object that allows you to localize the labels of buttons in modal boxes:

en.js

const core = {
    ok: "OK",
    cancel: "Cancel"
};

In German locale it looks like this:

de.js

const core = {
    ok: "OK",
    cancel: "Abbrechen"
};

To apply a necessary locale to a modal box, you should:

• include the Locale object on a page with a modal box and import the necessary locale package on a page.

Dialog.svelte

<script>
    import { Modal, Locale } from "wx-svelte-core";
    import { de } from "wx-core-locales";
</script>

• wrap the modal box you want to localize in the <Locale> tag and use the words property to set the necessary locale:

Dialog.svelte

<Locale words={de}>
    <Modal title="Custom Prompt" ok={hideAll} cancel={hideAll}>
        <Text select={true} focus={true} value="Some" />
    </Modal>
</Locale>