Add fr-FR locale

[M1CK431]

This function solves the problem (这个功能解决的问题)

Missing fr-FR locale ;)

Expected API (期望的 API)

Sorry I don't know how to contribute to add a locale because there is nothing about that in the documentation. So this is the fr-FR locale:

import { enUS } from "naive-ui";
import fr from "date-fns/locale/fr";

const dateFrFR = { name: "fr-FR", locale: fr };
const frFR = createLocale(
  {
    name: "fr-FR",
    global: {
      undo: "Défaire",
      redo: "Refaire",
      confirm: "Confirmer",
    },
    Popconfirm: {
      positiveText: "Confirmer",
      negativeText: "Annuler",
    },
    Cascader: {
      placeholder: "Sélectionner",
      loading: "Chargement",
      loadingRequiredMessage: (label) =>
        `Charger tous les enfants de ${label} avant de le sélectionner`,
    },
    Time: {
      dateFormat: "dd-MM-yyyy",
      dateTimeFormat: "dd-MM-yyyy HH:mm:ss",
    },
    DatePicker: {
      yearFormat: "yyyy",
      monthFormat: "MMM",
      dayFormat: "eeeeee",
      clear: "Effacer",
      now: "Maintenant",
      confirm: "Confirmer",
      selectTime: "Sélectionner l'heure",
      selectDate: "Sélectionner la date",
      datePlaceholder: "Sélectionner la date",
      datetimePlaceholder: "Sélectionner la date et l'heure",
      monthPlaceholder: "Sélectionner le mois",
      yearPlaceholder: "Sélectionner l'année",
      startDatePlaceholder: "Date de début",
      endDatePlaceholder: "Date de fin",
      startDatetimePlaceholder: "Date et heure de début",
      endDatetimePlaceholder: "Date et heure de fin",
      monthBeforeYear: true,
      firstDayOfWeek: 1,
      today: "Aujourd'hui",
    },
    DataTable: {
      checkTableAll: "Sélectionner tout",
      uncheckTableAll: "Désélectionner tout",
      confirm: "Confirmer",
      clear: "Effacer",
    },
    Transfer: {
      sourceTitle: "Source",
      targetTitle: "Cible",
    },
    Empty: {
      description: "Aucune donnée",
    },
    Select: {
      placeholder: "Sélectionner",
    },
    TimePicker: {
      placeholder: "Sélectionner l'heure",
      positiveText: "OK",
      negativeText: "Annuler",
      now: "Maintenant",
    },
    Pagination: {
      goto: "Aller à",
      selectionSuffix: "page",
    },
    DynamicTags: {
      add: "Ajouter",
    },
    Log: {
      loading: "Chargement",
    },
    Input: {
      placeholder: "Saisir",
    },
    InputNumber: {
      placeholder: "Saisir",
    },
    DynamicInput: {
      create: "Créer",
    },
    ThemeEditor: {
      title: "Editeur de thème",
      clearAllVars: "Effacer toutes les variables",
      clearSearch: "Effacer la recherche",
      filterCompName: "Filtrer par nom de composant",
      filterVarName: "Filtrer par nom de variable",
      import: "Importer",
      export: "Exporter",
      restore: "Réinitialiser",
    },
  },
  enUS
);

In addition, I have notice a typo in the en-US locale in Cascader > loadingRequiredMessage: "descedants" => "descendants" (missing "n").

Also, could you please explain where is used Time > dateFormat and Time > dateTimeFormat? I was expecting to see it used as default format for Date picker component?

Last but not least, in the documentation (https://www.naiveui.com/en-US/os-theme/docs/i18n), the last section title is "Customize the existing theme" but I guess it should be "Customize the existing locale"?

Thanks for the hard work you made on NaiveUI <3

[XieZongChen]

Hello, thank you for your French translation. You can check pr in #1753.

[XieZongChen]

Also, could you please explain where is used Time > dateFormat and Time > dateTimeFormat? I was expecting to see it used as default format for Date picker component?

If you want to change the default time format of Date picker component, you can refer to the screenshot above. I hope your problem can be solved. If it is not solved, you can also join Discord for discussion.

[M1CK431]

Hi @amadeus711,

Thanks A LOT for your so quick reply and the various fix/addition you have made in #1753 and #1756 👏

I haven't seen the answer for this question:

could you please explain where is used Time > dateFormat and Time > dateTimeFormat?

About

I was expecting to see it used as default format for Date picker component

thanks for screenshot and explanation ❤️

I was aware about the format prop of NDatePicker component. My question is about the default value for this prop (currently yyyy-MM-dd, perfect for en-US) which, in my humble opinion, should follow the locale.

For example, If a user want to switch from en-US to fr-FR, he was expecting to see the date picker format switch from yyyy-MM-dd to dd-MM-yyyy. Of course, we can already handle that case using the format prop, but it's a bit sad to deal with that manually while the locale already knows the best format 🥺

And so, my suggestion is to use Time.dateFormat and Time.dateTimeFormat (or to add the same properties in DatePicker) as default value for NDatePicker format prop. We should still keep the format prop however because some could need to force a specific format for only some date picker across the app, while keeping others to follow the chosen locale.

Benefits of this solution:

• no need to manually handle NDatePicker format while switching locale
• a way to overwrite the format globally (by overriding the locale)
• a way to overwrite the format locally (using the format prop)

What do you think about that?

NB: don't forget to handle NTimePicker format prop the same way if while implementing this feature 😉
NB2: sorry, I haven't a discord account

[07akioni]

Hi @amadeus711,

Thanks A LOT for your so quick reply and the various fix/addition you have made in #1753 and #1756 👏

I haven't seen the answer for this question:

could you please explain where is used Time > dateFormat and Time > dateTimeFormat?

About

I was expecting to see it used as default format for Date picker component

thanks for screenshot and explanation ❤️

I was aware about the format prop of NDatePicker component. My question is about the default value for this prop (currently yyyy-MM-dd, perfect for en-US) which, in my humble opinion, should follow the locale.

For example, If a user want to switch from en-US to fr-FR, he was expecting to see the date picker format switch from yyyy-MM-dd to dd-MM-yyyy. Of course, we can already handle that case using the format prop, but it's a bit sad to deal with that manually while the locale already knows the best format 🥺

And so, my suggestion is to use Time.dateFormat and Time.dateTimeFormat (or to add the same properties in DatePicker) as default value for NDatePicker format prop. We should still keep the format prop however because some could need to force a specific format for only some date picker across the app, while keeping others to follow the chosen locale.

Benefits of this solution:

• no need to manually handle NDatePicker format while switching locale
• a way to overwrite the format globally (by overriding the locale)
• a way to overwrite the format locally (using the format prop)

What do you think about that?

NB: don't forget to handle NTimePicker format prop the same way if while implementing this feature 😉 NB2: sorry, I haven't a discord account

Seems dateTimeFormat and dateFormat is only used in n-time. We will make it work in date-picke soon.

After it's fixed, you can use createLocale with an existing locale and overrides it's date format globally.

[M1CK431]

@amadeus711 @07akioni ,
guys i am really impressed 🤩
You got it all done in 2 days!! Thank you so much 🙏

Keep up the good work 👍
Love you all ❤️ 😘

[M1CK431]

Oups! I just notice that I miss the date separator (/ instead of -) in my translation, it should be:

{
  Time: {
    dateFormat: "dd/MM/yyyy",
    dateTimeFormat: "dd/MM/yyyy HH:mm:ss"
  }
  DatePicker: {
    monthTypeFormat: "MM/yyyy",
    dateFormat: "dd/MM/yyyy",
    dateTimeFormat: "dd/MM/yyyy HH:mm:ss"
  }
}

Really sorry, my bad 😞

Also, I guess the input field inside NDatePicker should probably respect the locale format too: