Localization and Internationalization

/**
 * Register a date-fns locale for use with DatePicker
 * @param localeName - Name identifier for the locale (e.g., "es", "fr", "de")
 * @param localeData - date-fns locale object
 */
function registerLocale(localeName: string, localeData: LocaleObject): void;

/**
 * Set the default locale for all DatePicker instances
 * @param locale - Registered locale name to use as default
 */
function setDefaultLocale(locale: string): void;

/**
 * Get the currently set default locale
 * @returns Current default locale name
 */
function getDefaultLocale(): string;

/**
 * Get locale object for formatting and parsing
 * @param locale - Locale name or locale object
 * @returns date-fns locale object or undefined
 */
function getLocaleObject(locale?: Locale): LocaleObject | undefined;

/**
 * Get formatted weekday name in specified locale
 * @param date - Date to get weekday from
 * @param formatFunc - Formatting function ("format" for long, "short", or "min")
 * @param locale - Locale for formatting
 * @returns Formatted weekday name
 */
function getFormattedWeekdayInLocale(
  date: Date,
  formatFunc: string,
  locale?: Locale
): string;

/**
 * Get short weekday name in locale
 * @param date - Date to get weekday from
 * @param locale - Locale for formatting
 * @returns Short weekday name (e.g., "Mon", "Tue")
 */
function getWeekdayShortInLocale(date: Date, locale?: Locale): string;

/**
 * Get minimal weekday name in locale
 * @param date - Date to get weekday from
 * @param locale - Locale for formatting
 * @returns Minimal weekday name (e.g., "M", "T")
 */
function getWeekdayMinInLocale(date: Date, locale?: Locale): string;

/**
 * Get month name in specified locale
 * @param month - Month number (0-11)
 * @param locale - Locale for formatting
 * @returns Full month name
 */
function getMonthInLocale(month: number, locale?: Locale): string;

/**
 * Get short month name in locale
 * @param month - Month number (0-11)  
 * @param locale - Locale for formatting
 * @returns Short month name
 */
function getMonthShortInLocale(month: number, locale?: Locale): string;

/**
 * Get quarter name in locale
 * @param quarter - Quarter number (1-4)
 * @param locale - Locale for formatting
 * @returns Quarter name (e.g., "Q1", "1st quarter")
 */
function getQuarterShortInLocale(quarter: number, locale?: Locale): string;

/**
 * Locale specification - either string identifier or locale object
 */
type Locale = string | LocaleObject;

/**
 * date-fns locale object interface
 */
interface LocaleObject {
  code?: string;
  formatDistance?: Function;
  formatRelative?: Function;
  localize?: {
    ordinalNumber: Function;
    era: Function;
    quarter: Function;
    month: Function;
    day: Function;
    dayPeriod: Function;
  };
  formatLong?: {
    date: Function;
    time: Function;
    dateTime: Function;
  };
  match?: {
    ordinalNumber: Function;
    era: Function;
    quarter: Function;
    month: Function;
    day: Function;
    dayPeriod: Function;
  };
  options?: {
    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
    firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
  };
}

import { registerLocale, setDefaultLocale, getDefaultLocale } from "react-datepicker";
import { es, fr, de, ja } from "date-fns/locale";

// Register multiple locales
registerLocale("es", es);
registerLocale("fr", fr);
registerLocale("de", de);
registerLocale("ja", ja);

// Set Spanish as default
setDefaultLocale("es");

console.log(getDefaultLocale()); // "es"

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { registerLocale } from "react-datepicker";
import { es, fr, de } from "date-fns/locale";

// Register locales
registerLocale("es", es);
registerLocale("fr", fr);
registerLocale("de", de);

function MultiLanguageDatePicker() {
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  const [locale, setLocale] = useState("es");

  return (
    <div>
      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="fr">Français</option>
        <option value="de">Deutsch</option>
      </select>
      
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        locale={locale}
        dateFormat="PP" // Localized long date format
        placeholderText="Selecciona una fecha"
      />
    </div>
  );
}

import { registerLocale } from "react-datepicker";
import { enGB, de } from "date-fns/locale";

// Register UK locale (Monday start) and German locale
registerLocale("en-GB", enGB);
registerLocale("de", de);

function WeekStartDatePicker() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <DatePicker
      selected={date}
      onChange={setDate}
      locale="en-GB" // Week starts on Monday
      inline
    />
  );
}

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { registerLocale } from "react-datepicker";
import { enUS, enGB, de, ja } from "date-fns/locale";

registerLocale("en-US", enUS);
registerLocale("en-GB", enGB);
registerLocale("de", de);
registerLocale("ja", ja);

const localeFormats = {
  "en-US": "MM/dd/yyyy",
  "en-GB": "dd/MM/yyyy",
  "de": "dd.MM.yyyy",
  "ja": "yyyy年MM月dd日"
};

function LocalizedFormatDatePicker() {
  const [date, setDate] = useState<Date | null>(new Date());
  const [currentLocale, setCurrentLocale] = useState("en-US");

  return (
    <div>
      <select 
        value={currentLocale} 
        onChange={(e) => setCurrentLocale(e.target.value)}
      >
        <option value="en-US">US English</option>
        <option value="en-GB">UK English</option>
        <option value="de">German</option>
        <option value="ja">Japanese</option>
      </select>
      
      <DatePicker
        selected={date}
        onChange={setDate}
        locale={currentLocale}
        dateFormat={localeFormats[currentLocale]}
      />
    </div>
  );
}

import { registerLocale } from "react-datepicker";
import { fr, de } from "date-fns/locale";

registerLocale("fr", fr);
registerLocale("de", de);

function LocalizedTimePicker() {
  const [date, setDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      selected={date}
      onChange={setDate}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="Heure" // French for "Time"
      dateFormat="Pp" // Localized date and time format
      locale="fr"
    />
  );
}

import { registerLocale } from "react-datepicker";
import { es } from "date-fns/locale";

registerLocale("es", es);

function SpanishDateRangePicker() {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <DatePicker
      selected={startDate}
      onChange={(dates: [Date | null, Date | null]) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
      }}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      locale="es"
      dateFormat="dd 'de' MMMM 'de' yyyy"
      placeholderText="Selecciona rango de fechas"
      rangeSeparator=" hasta "
    />
  );
}

import React, { useState, useEffect } from "react";
import DatePicker, { registerLocale } from "react-datepicker";

// Dynamic import function for locales
async function loadLocale(localeCode: string) {
  try {
    const localeModule = await import(`date-fns/locale/${localeCode}`);
    return localeModule.default;
  } catch (error) {
    console.error(`Failed to load locale: ${localeCode}`, error);
    return null;
  }
}

function DynamicLocaleDatePicker() {
  const [date, setDate] = useState<Date | null>(new Date());
  const [currentLocale, setCurrentLocale] = useState("en");
  const [loadedLocales, setLoadedLocales] = useState<Set<string>>(new Set(["en"]));

  const handleLocaleChange = async (newLocale: string) => {
    if (!loadedLocales.has(newLocale)) {
      const localeData = await loadLocale(newLocale);
      if (localeData) {
        registerLocale(newLocale, localeData);
        setLoadedLocales(prev => new Set([...prev, newLocale]));
      }
    }
    setCurrentLocale(newLocale);
  };

  return (
    <div>
      <select 
        value={currentLocale}
        onChange={(e) => handleLocaleChange(e.target.value)}
      >
        <option value="en">English</option>
        <option value="es">Spanish</option>
        <option value="fr">French</option>
        <option value="de">German</option>
        <option value="it">Italian</option>
        <option value="pt">Portuguese</option>
        <option value="ru">Russian</option>
        <option value="ja">Japanese</option>
        <option value="ko">Korean</option>
        <option value="zh-CN">Chinese (Simplified)</option>
      </select>
      
      <DatePicker
        selected={date}
        onChange={setDate}
        locale={currentLocale}
        dateFormat="PP"
        showMonthDropdown
        showYearDropdown
      />
    </div>
  );
}

import { registerLocale } from "react-datepicker";
import { ar, he, fa } from "date-fns/locale";

registerLocale("ar", ar); // Arabic
registerLocale("he", he); // Hebrew
registerLocale("fa", fa); // Persian/Farsi

function RTLDatePicker() {
  const [date, setDate] = useState<Date | null>(new Date());
  const [locale, setLocale] = useState("ar");

  return (
    <div dir={locale === "ar" || locale === "he" || locale === "fa" ? "rtl" : "ltr"}>
      <DatePicker
        selected={date}
        onChange={setDate}
        locale={locale}
        dateFormat="PP"
        className={locale === "ar" ? "arabic-calendar" : ""}
        calendarClassName="rtl-calendar"
      />
    </div>
  );
}

import { registerLocale, setDefaultLocale } from "react-datepicker";
import {
  enUS, enGB, enCA, enAU,  // English variants
  es, esES, esMX,          // Spanish variants  
  fr, frCA,                // French variants
  de, deAT, deCH,          // German variants
  it, itCH,                // Italian variants
  pt, ptBR,                // Portuguese variants
  ru,                      // Russian
  ja,                      // Japanese
  ko,                      // Korean
  zhCN, zhTW,              // Chinese variants
  ar, arSA,                // Arabic variants
  hi,                      // Hindi
  nl, nlBE,                // Dutch variants
  sv, svFI,                // Swedish variants
  da,                      // Danish
  no, nb,                  // Norwegian variants
  fi,                      // Finnish
  pl,                      // Polish
  cs,                      // Czech
  hu,                      // Hungarian
  th,                      // Thai
  vi,                      // Vietnamese
  id,                      // Indonesian
  ms,                      // Malaysian
  tr,                      // Turkish
  he,                      // Hebrew
} from "date-fns/locale";

// Register all common locales
const locales = {
  "en-US": enUS, "en-GB": enGB, "en-CA": enCA, "en-AU": enAU,
  "es": es, "es-ES": esES, "es-MX": esMX,
  "fr": fr, "fr-CA": frCA,
  "de": de, "de-AT": deAT, "de-CH": deCH,
  "it": it, "it-CH": itCH,
  "pt": pt, "pt-BR": ptBR,
  "ru": ru, "ja": ja, "ko": ko,
  "zh-CN": zhCN, "zh-TW": zhTW,
  "ar": ar, "ar-SA": arSA, "hi": hi,
  "nl": nl, "nl-BE": nlBE,
  "sv": sv, "sv-FI": svFI, "da": da,
  "no": no, "nb": nb, "fi": fi, "pl": pl,
  "cs": cs, "hu": hu, "th": th, "vi": vi,
  "id": id, "ms": ms, "tr": tr, "he": he
};

// Register all locales
Object.entries(locales).forEach(([name, locale]) => {
  registerLocale(name, locale);
});

// Set default based on browser locale
const browserLocale = navigator.language || "en-US";
if (locales[browserLocale]) {
  setDefaultLocale(browserLocale);
}