Languages

Month names, weekday names, digits, the first day of the week and the text direction come from the browser's Intl, for every locale it knows and with nothing bundled:

createDateRangePicker(input, { locale: 'ar-AE' });
createDateRangePicker(input, { locale: 'ur-PK' });

The words around the calendar — the footer buttons, the messages, the preset names and the count of nights — are written in fifteen languages:

Arabic · Urdu · French · German · Spanish · Portuguese · Italian · Dutch · Turkish · Russian · Polish · Hindi · Indonesian · Chinese · Japanese

import { createDateRangePicker } from '@devix-labs/date-range-picker';
import { registerAll } from '@devix-labs/date-range-picker/locales';

registerAll();                                        // every language, once
createDateRangePicker(input, { locale: 'ar-AE' });    // now Arabic throughout

Or one, which is what most sites need — your bundler ships only what you name:

import { registerStrings } from '@devix-labs/date-range-picker';
import { ar } from '@devix-labs/date-range-picker/locales';

registerStrings('ar', ar);

A pack is around 0.5 KB gzipped; all fifteen are 7.5 KB, and the widget carries none of it. Registering is global, so <dx-date-range-picker locale="ar"> in markup is translated too.

Presets and counts#

Both are part of a pack, which is what separates a translated range picker from one that shows an Arabic calendar with Last 7 days underneath it:

createDateRangePicker(input, { locale: 'ar-EG', presets: ['today', 'last7', 'thisMonth'] });
// اليوم · آخر ٧ أيام · هذا الشهر

The summary counts the nights in the language's own plural forms — Arabic has six and a dual, Russian three, Polish four — through Intl.PluralRules:

1 يوم واحد · 2 يومان · 3 ٣ أيام · 11 ١١ يومًا

A preset you wrote yourself keeps the label you gave it; only the built-in ones are translated.

Your own words#

strings wins over a registered pack, one key at a time, and a language nobody has written yet is one object away:

createDateRangePicker(input, { locale: 'fr', strings: { apply: 'Valider' } });
registerStrings('sw', { today: 'Leo', clear: 'Futa' });

The complete list of keys is DEFAULT_STRINGS, exported from the package. Anything left out falls back to English rather than showing a blank button.