question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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 ❤️

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
07akionicommented, Dec 6, 2021

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.

1reaction
amadeus711commented, Dec 6, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Add fr-FR locale · Issue #1751 · tusen-ai/naive-ui - GitHub
This function solves the problem (这个功能解决的问题). Missing fr-FR locale ;). Expected API (期望的 API).
Read more >
Creating a Locale (The Java™ Tutorials > Internationalization ...
This internationalization Java tutorial describes setting locale, isolating locale-specific data, formatting data, internationalized domain name and ...
Read more >
Angular npm run build - Locale data for 'fr-FR' cannot be found
In my angular.json on adding fr-Fr locale, I see a message Locale data for 'fr-FR' cannot be found. Using locale data for 'fr'...
Read more >
Valid Locales for Data Extension Sends - Salesforce Help
In Marketing Cloud MobileConnect, you can send only to data extensions whose mobile numbers include a locale. Review this list of valid five-character ......
Read more >
InputLocale (microsoft-windows-international-core-inputlocale)
Users can add and remove input locales through the Keyboard and Languages tab of the Region and Language Control Panel.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found