[Feature Request] Date Picker support for dd/mm/yyyy and yyyy/mm/dd

[Armandotrsg]

Is your feature request related to a problem? Please describe.

In most countries we don't use the American date format

Describe the solution you'd like

As an international user, I would expect to able to configure the date picker to be set using the dd/mm/yyyy or the yyyy/mm/dd

Describe alternatives you've considered

-

Screenshots or Videos

No response

[linear[bot]]

ENG-673 [Feature Request] Date Picker support for dd/mm/yyyy and yyyy/mm/dd

[MartaBento]

@Armandotrsg can you check if wrapping the component with I18nProvider and the locale set for what you need solves your issue? I'm currently using:

import { I18nProvider } from "@react-aria/i18n";
import { DateInput } from "@nextui-org/react";

<I18nProvider locale="en-GB">
<DateInput ... />
</I18nProvider>

And this allows me to use the configuration dd/mm/yyyy.

[getellez]

@Armandotrsg can you check if wrapping the component with I18nProvider and the locale set for what you need solves your issue? I'm currently using:

import { I18nProvider } from "@react-aria/i18n";
import { DateInput } from "@nextui-org/react";

<I18nProvider locale="en-GB">
<DateInput ... />
</I18nProvider>

And this allows me to use the configuration dd/mm/yyyy.

it didn't work for me, could you show a screenshot of it working with the dd/mm/yyyy format?

[Armandotrsg]

@Armandotrsg can you check if wrapping the component with I18nProvider and the locale set for what you need solves your issue? I'm currently using:

import { I18nProvider } from "@react-aria/i18n";
import { DateInput } from "@nextui-org/react";

<I18nProvider locale="en-GB">
<DateInput ... />
</I18nProvider>

And this allows me to use the configuration dd/mm/yyyy.

it didn't work for me, could you show a screenshot of it working with the dd/mm/yyyy format?

Thanks! It worked for me, it even allows to use it in Spanish as well:

<I18nProvider locale="es-GB">
      <DateRangePicker
        value={date}
        onChange={setDate}
        label="Fecha de postulación"
        description="dd/mm/yyyy"
        labelPlacement="outside"
      />
</I18nProvider>

[jrgarciadev]

Hey guys you can set up this globally using the NextUIProvider locale property https://nextui.org/docs/api-references/nextui-provider#locale

Supported locales:

const localeValues = [
  'fr-FR', 'fr-CA', 'de-DE', 'en-US', 'en-GB', 'ja-JP',
  'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES', 'sv-SE', 'pt-BR',
  'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG', 'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU',
  'lv-LV', 'lt-LT', 'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI', 'tr-TR', 'uk-UA',
  'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA', 'el-GR', 'he-IL', 'fa-AF', 'am-ET', 'hi-IN', 'th-TH'
];

const calendars = [
  'gregory', 'japanese', 'buddhist', 'roc', 'persian', 'indian',
  'islamic-umalqura', 'islamic-civil', 'islamic-tbla', 'hebrew',
  'coptic', 'ethiopic', 'ethioaa'
]

So for Spanish, you could do the following:

"use client";

import {type ReactNode} from "react";
import {NextUIProvider} from "@nextui-org/react";

export function AppProvider(props: AppProviderProps) {
  const {children, className} = props;

  return (
    <NextUIProvider locale="es-ES" className={className}>
      {children}
    </NextUIProvider>
  );
}

interface AppProviderProps {
  children: ReactNode;
  className?: string;
}

[tjfaith]

@Armandotrsg can you check if wrapping the component with I18nProvider and the locale set for what you need solves your issue? I'm currently using:

import { I18nProvider } from "@react-aria/i18n";
import { DateInput } from "@nextui-org/react";

<I18nProvider locale="en-GB">
<DateInput ... />
</I18nProvider>

And this allows me to use the configuration dd/mm/yyyy.

it didn't work for me, could you show a screenshot of it working with the dd/mm/yyyy format?

Thanks! It worked for me, it even allows to use it in Spanish as well:

<I18nProvider locale="es-GB">
      <DateRangePicker
        value={date}
        onChange={setDate}
        label="Fecha de postulación"
        description="dd/mm/yyyy"
        labelPlacement="outside"
      />
</I18nProvider>

This dosnt work for me, i want to be able to get formatt the Input like this mm/yyyy

[tjfaith]

how do i get only month and year, i need to formatt it like this mm/yyyy, there should be a dateFormat props