Localization

() => {
  // import { Calendar } from "@use-date-input/core";
  // import { adapter as dateFnsAdapter } from "@use-date-input/date-fns-adapter";
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 1 : 3
  const numOfVisibleMonths = isSmallBreakpoint ? 1 : 12
  const russianDateFnsAdapter = adapterArgs => {
    const dateFnsAPI = dateFnsAdapter(adapterArgs)
    return {
      ...dateFnsAPI,
      format: (date, formatStr) =>
        dateFnsAPI.format(date, formatStr, { locale: ru }),
    }
  }
  return (
    <Calendar
      adapter={russianDateFnsAdapter}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
    />
  )
}

() => {
  // import { Calendar } from "@use-date-input/core";
  // import dayjsAdapter from "@use-date-input/dayjs-adapter";
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 1 : 3
  const numOfVisibleMonths = isSmallBreakpoint ? 1 : 12
  const chineseDayJSAdapter = adapterArgs => {
    const dayjsAPI = dayjsAdapter(adapterArgs)
    return {
      ...dayjsAPI,
      createDate: dateArgs => dayjsAPI.createDate(dateArgs).locale('zh-cn'),
    }
  }
  return (
    <Calendar
      adapter={chineseDayJSAdapter}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
    />
  )
}

() => {
  // import { Calendar } from "@use-date-input/core";
  // import luxonAdapter from "@use-date-input/luxon-adapter";
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 1 : 3
  const numOfVisibleMonths = isSmallBreakpoint ? 1 : 12
  const frenchLuxonAdapter = adapterArgs => {
    const luxonAPI = luxonAdapter(adapterArgs)
    return {
      ...luxonAPI,
      createDate: date => luxonAPI.createDate(date).setLocale('fr'),
    }
  }
  return (
    <Calendar
      adapter={frenchLuxonAdapter}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
    />
  )
}

() => {
  // import { Calendar } from "@use-date-input/core";
  // import momentAdapter from "@use-date-input/moment-adapter";
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 1 : 3
  const numOfVisibleMonths = isSmallBreakpoint ? 1 : 12
  const spanishMomentAdapter = adapterArgs => {
    const momentAPI = momentAdapter(adapterArgs)
    return {
      ...momentAPI,
      createDate: dateArgs => momentAPI.createDate(dateArgs).locale('es'),
    }
  }
  return (
    <Calendar
      adapter={spanishMomentAdapter}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
    />
  )
}