Adapters and Localization

/**
 * Provider component for date adapter and localization
 * @param props - LocalizationProvider configuration properties
 * @returns JSX element wrapping picker components
 */
function LocalizationProvider<TDate>(props: LocalizationProviderProps<TDate>): JSX.Element;

interface LocalizationProviderProps<TDate> {
  /** Date adapter instance for date manipulation */
  dateAdapter: new (...args: any) => MuiPickersAdapter<TDate>;
  /** Locale to use with the date adapter */
  adapterLocale?: any;
  /** Child components that will have access to the adapter */
  children: React.ReactNode;
  /** Custom locale text overrides */
  localeText?: Partial<PickersLocaleText<TDate>>;
}

/**
 * Context for accessing the current date adapter
 */
const MuiPickersAdapterContext: React.Context<MuiPickersAdapter<any> | null>;

interface MuiPickersAdapter<TDate> {
  /** Date library being wrapped */
  lib: string;
  /** Current locale */
  locale?: any;
  /** Formats supported by the adapter */
  formats: AdapterFormats;
  /** Default timezone */
  timezone: string;
  
  // Date creation and parsing
  date(value?: any): TDate | null;
  dateWithTimezone(value: any, timezone: string): TDate | null;
  parse(value: string, format: string): TDate | null;
  
  // Date information
  isNull(date: TDate | null): boolean;
  isValid(value: any): boolean;
  format(date: TDate, formatKey: keyof AdapterFormats): string;
  formatByString(date: TDate, formatString: string): string;
  formatNumber(numberToFormat: string): string;
  
  // Date manipulation
  addYears(date: TDate, amount: number): TDate;
  addMonths(date: TDate, amount: number): TDate;
  addWeeks(date: TDate, amount: number): TDate;
  addDays(date: TDate, amount: number): TDate;
  addHours(date: TDate, amount: number): TDate;
  addMinutes(date: TDate, amount: number): TDate;
  addSeconds(date: TDate, amount: number): TDate;
  
  // Date comparison
  isAfter(date: TDate, value: TDate): boolean;
  isBefore(date: TDate, value: TDate): boolean;
  isSameYear(date: TDate, comparing: TDate): boolean;
  isSameMonth(date: TDate, comparing: TDate): boolean;
  isSameDay(date: TDate, comparing: TDate): boolean;
  isSameHour(date: TDate, comparing: TDate): boolean;
  
  // Date extraction
  getYear(date: TDate): number;
  getMonth(date: TDate): number;
  getDate(date: TDate): number;
  getHours(date: TDate): number;
  getMinutes(date: TDate): number;
  getSeconds(date: TDate): number;
  getMilliseconds(date: TDate): number;
  
  // Date setting
  setYear(date: TDate, year: number): TDate;
  setMonth(date: TDate, month: number): TDate;
  setDate(date: TDate, date: number): TDate;
  setHours(date: TDate, hours: number): TDate;
  setMinutes(date: TDate, minutes: number): TDate;
  setSeconds(date: TDate, seconds: number): TDate;
  setMilliseconds(date: TDate, milliseconds: number): TDate;
  
  // Calendar utilities
  getDaysInMonth(date: TDate): number;
  getWeekdays(): string[];
  getWeekArray(date: TDate): TDate[][];
  getWeekNumber?(date: TDate): number;
  getYearRange(start: TDate, end: TDate): TDate[];
}

interface AdapterFormats {
  dayOfMonth: string;
  fullDate: string;
  fullDateTime: string;
  fullDateTime12h: string;
  fullDateTime24h: string;
  fullDateWithWeekday: string;
  fullTime: string;
  fullTime12h: string;
  fullTime24h: string;
  hours12h: string;
  hours24h: string;
  keyboardDate: string;
  keyboardDateTime: string;
  keyboardDateTime12h: string;
  keyboardDateTime24h: string;
  minutes: string;
  month: string;
  monthAndDate: string;
  monthAndYear: string;
  monthShort: string;
  normalDate: string;
  normalDateWithWeekday: string;
  seconds: string;
  shortDate: string;
  year: string;
}

/**
 * Date adapter for date-fns library
 */
class AdapterDateFns implements MuiPickersAdapter<Date> {
  constructor(options?: { locale?: Locale; formats?: Partial<AdapterFormats> });
}

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { enUS, fr } from 'date-fns/locale';

// Basic usage with English locale
function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker label="Select date" />
    </LocalizationProvider>
  );
}

// Usage with French locale
function FrenchApp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={fr}>
      <DatePicker label="Sélectionner une date" />
    </LocalizationProvider>
  );
}

/**
 * Date adapter for Day.js library
 */
class AdapterDayjs implements MuiPickersAdapter<dayjs.Dayjs> {
  constructor(options?: { locale?: string; instance?: typeof dayjs; formats?: Partial<AdapterFormats> });
}

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs from 'dayjs';
import 'dayjs/locale/fr';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

// Configure dayjs plugins
dayjs.extend(utc);
dayjs.extend(timezone);

// Basic usage
function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker label="Select date" />
    </LocalizationProvider>
  );
}

// Usage with French locale
function FrenchApp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
      <DatePicker label="Sélectionner une date" />
    </LocalizationProvider>
  );
}

/**
 * Date adapter for Luxon library
 */
class AdapterLuxon implements MuiPickersAdapter<luxon.DateTime> {
  constructor(options?: { locale?: string; formats?: Partial<AdapterFormats> });
}

import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

// Basic usage
function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <DatePicker label="Select date" />
    </LocalizationProvider>
  );
}

// Usage with French locale
function FrenchApp() {
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale="fr">
      <DatePicker label="Sélectionner une date" />
    </LocalizationProvider>
  );
}

/**
 * Date adapter for Moment.js library
 */
class AdapterMoment implements MuiPickersAdapter<moment.Moment> {
  constructor(options?: { locale?: string; instance?: typeof moment; formats?: Partial<AdapterFormats> });
}

import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import moment from 'moment';
import 'moment/locale/fr';

// Basic usage
function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DatePicker label="Select date" />
    </LocalizationProvider>
  );
}

// Usage with French locale
function FrenchApp() {
  return (
    <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="fr">
      <DatePicker label="Sélectionner une date" />
    </LocalizationProvider>
  );
}

/**
 * Date adapter for date-fns with Jalali calendar
 */
class AdapterDateFnsJalali implements MuiPickersAdapter<Date> {
  constructor(options?: { locale?: Locale; formats?: Partial<AdapterFormats> });
}

/**
 * Date adapter for Moment.js with Hijri calendar
 */
class AdapterMomentHijri implements MuiPickersAdapter<moment.Moment> {
  constructor(options?: { locale?: string; formats?: Partial<AdapterFormats> });
}

/**
 * Date adapter for Moment.js with Jalaali calendar
 */
class AdapterMomentJalaali implements MuiPickersAdapter<moment.Moment> {
  constructor(options?: { locale?: string; formats?: Partial<AdapterFormats> });
}

/**
 * Date adapter for date-fns v2.x (legacy support)
 */
class AdapterDateFns implements MuiPickersAdapter<Date> {
  constructor(options?: { locale?: Locale; formats?: Partial<AdapterFormats> });
}

import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { enUS } from 'date-fns/locale';

// Basic usage for date-fns v2.x
function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker label="Select date" />
    </LocalizationProvider>
  );
}

// Usage with locale for date-fns v2.x
function LocalizedApp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={enUS}>
      <DatePicker label="Select date" />
    </LocalizationProvider>
  );
}

/**
 * Date adapter for date-fns-jalali v2.x (legacy Persian calendar support)
 */
class AdapterDateFnsJalali implements MuiPickersAdapter<Date> {
  constructor(options?: { locale?: any; formats?: Partial<AdapterFormats> });
}

import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

// Basic usage for date-fns-jalali v2.x
function PersianApp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
      <DatePicker label="انتخاب تاریخ" />
    </LocalizationProvider>
  );
}

interface PickersLocaleText<TDate> {
  // Calendar navigation
  previousMonth: string;
  nextMonth: string;
  
  // View switching
  openDatePickerDialogue: (value: TDate, utils: MuiPickersAdapter<TDate>) => string;
  openTimePickerDialogue: (value: TDate, utils: MuiPickersAdapter<TDate>) => string;
  
  // Placeholder
  fieldYearPlaceholder: (params: { digitAmount: number }) => string;
  fieldMonthPlaceholder: (params: { contentType: FieldSectionContentType }) => string;
  fieldDayPlaceholder: () => string;
  fieldWeekDayPlaceholder: (params: { contentType: FieldSectionContentType }) => string;
  fieldHoursPlaceholder: () => string;
  fieldMinutesPlaceholder: () => string;
  fieldSecondsPlaceholder: () => string;
  fieldMeridiemPlaceholder: () => string;
  
  // Toolbar
  datePickerToolbarTitle: string;
  timePickerToolbarTitle: string;
  dateTimePickerToolbarTitle: string;
  
  // View names
  calendarViewSwitchingButtonAriaLabel: (view: CalendarPickerView) => string;
  clockViewSwitchingButtonAriaLabel: (view: ClockPickerView) => string;
  
  // Actions
  cancelButtonLabel: string;
  clearButtonLabel: string;
  okButtonLabel: string;
  todayButtonLabel: string;
  
  // Start/end labels
  start: string;
  end: string;
}

type FieldSectionContentType = 'digit' | 'digit-with-letter' | 'letter';
type CalendarPickerView = 'year' | 'month' | 'day';
type ClockPickerView = 'hours' | 'minutes' | 'seconds';

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

// Custom locale text
const customLocaleText = {
  cancelButtonLabel: 'Annuler',
  clearButtonLabel: 'Effacer',
  okButtonLabel: 'OK',
  todayButtonLabel: 'Aujourd\'hui',
  datePickerToolbarTitle: 'Sélectionner la date',
  timePickerToolbarTitle: 'Sélectionner l\'heure',
  dateTimePickerToolbarTitle: 'Sélectionner la date et l\'heure',
  previousMonth: 'Mois précédent',
  nextMonth: 'Mois suivant',
};

function CustomizedApp() {
  return (
    <LocalizationProvider 
      dateAdapter={AdapterDayjs} 
      localeText={customLocaleText}
    >
      <DatePicker label="Sélectionner une date" />
    </LocalizationProvider>
  );
}

type PickersTimezone = string | 'default' | 'system';

interface TimezoneProps {
  /** Timezone to use for picker operations */
  timezone?: PickersTimezone;
}

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

function TimezoneApp() {
  const [value, setValue] = React.useState(dayjs());
  
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimePicker
        label="New York Time"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        timezone="America/New_York"
      />
    </LocalizationProvider>
  );
}