Aide-mémoire sur le format de la date – Comment formater les dates Réagir DatePicker

Aujourd'hui, nous allons détailler les formats de date et d'heure courants et partager quelques conseils pratiques pour l'utilisation de KendoReact DatePicker.

Saviez-vous que certains pays ont des formats de date différents des autres ? J'ai été un peu surpris aussi quand j'ai eu connaissance de cela pour la première fois. Par exemple, aux États-Unis, le format de date couramment utilisé est MM/JJ/AAAA, mais de nombreux pays d'Europe, comme le Royaume-Uni, utilisent le format JJ/MM/AAAA. Certains pays arabes utilisent JJ/AAAA/M, tandis que la Chine utilise AAAA/MM/JJ.

Fournir un formatage correct de la date et de l'heure peut s'avérer assez délicat si votre application sert des utilisateurs dans de nombreux pays différents. Pour offrir une meilleure expérience utilisateur, c'est une bonne idée d'afficher les dates dans un format auquel les utilisateurs sont le plus habitués.

Voyons comment nous pouvons implémenter les formats susmentionnés dans un React DatePicker. Pour illustrer comment nous pouvons gérer différents formats de date, nous utiliserons KendoReact DatePicker. En plus de cela, nous utiliserons le KendoReact DateTimePicker pour illustrer comment formater les heures.

Si vous êtes intéressé par d'autres formats de date possibles, consultez cette page.

L'exemple de code complet est disponible dans ce référentiel GitHub. Vous trouverez ci-dessous un exemple interactif de ce que nous allons implémenter :

Configuration du projet

Pour configurer un nouveau projet React, vous pouvez exécuter le npx create-react-app my-react-datepicker commande dans votre terminal.

Une fois le projet créé, installez ces dépendances :

$ npm install --save @progress/kendo-react-dateinputs @progress/kendo-theme-material @progress/kendo-react- intl cldr-core cldr-dates-full @progress/kendo-licensing

Ensuite, remplacez le contenu des fichiers App.js et App.csscar nous devons nettoyer le code par défaut et importer le thème que nous avons installé.

src/App.js

import '@progress/kendo-theme-material/dist/all.css';
import "./App.css"[19659015];

function App() {
  return <div className="App">[19659027]</div>;
}

export default App;

src/App.css

.App {
  max-width: 40rem;
  margin[19659015]: 2rem auto;
}

C'est tout pour la configuration du projet. Ajoutons un React DatePicker avec quelques formats de date différents.

Remarque : KendoReact est une bibliothèque de composants d'interface utilisateur commerciale, et dans le cadre de cela, vous devrez fournir une clé de licence lorsque vous utilisez les composants dans vos projets React. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d'informations, vous pouvez vous rendre sur la KendoReact Licensing page.

Formatage de dates avec un React DatePicker

Un grand avantage du KendoReact DatePicker composant est qu'il fournit prise en charge prête à l'emploi pour le formatage des dates. Nous pouvons facilement spécifier le format de date que nous voulons en fournissant la prop format au composant DatePicker. Le code ci-dessous montre quatre sélecteurs de date affichant les formats de date américains, britanniques, arabes et chinois.

src/components/DatePickers.js

import { DatePicker }  from "@progress/kendo-react-dateinputs";

export default function DatePickers() {
  return  (
    <>
      <h2>React DatePicker</h2>
      <form className="k-form k-mb-8">
        <div className="k-my-4">
          <label className="k-form-field">
            Format de date américain
            <DatePicker format="MM-dd-yyyy" />
          </libellé>
        </div>
        <div className="k-my-4">
          <légende>Format de date britannique</légende>
          <DatePicker format="jj-MM-aaaa" />
        </div>
        <div className="k-my-4">
          <légende>Format de date arabe</légende>
          <DatePicker format="jj-aaa-M" />
        </div>
        <div className="k-my-4">
          <légende>Format de date chinois</légende>
          <DatePicker format="aaaa-MM-jj" />
        </div>
      </form>
      <h2>Format de date personnalisé </h2>
      <form className="k-form k-my-8 "></form>
    </>
  );
 }

Maintenant, mettez à jour le fichier App.js pour rendre le composant DatePickers.

src/App.js

import "@progress/ kendo-theme-material/dist/all.css";
import "./App.css";
import DatePickers from " ./components/DatePickers";

fonction App() {
  retour (
    <div className="App">
      <h1> Exemples de formats de date utilisant DatePicker</h1>
      <DatePickers />
    </div>
  );
}

export default App;

Faire fonctionner le composant KendoReact DatePicker avec des formats de date personnalisés était un jeu d'enfant. De plus, le composant DatePicker a une grande accessibilité, il peut donc être entièrement contrôlé simplement à l'aide d'un clavier.

Si vous souhaitez explorer les formats de date de KendoReact, vous pouvez trouver la documentation ici.[19659006]Maintenant, et si nous voulions un format un peu différent ? Disons que nous voulions afficher un nom de mois complet au lieu de simplement des chiffres. Nous pouvons le faire en fournissant un objet à la prop format. Créez un nouveau composant appelé LongMonthFormatPicker.

src/components/LongMonthFormatPicker.js

import { DatePicker } "de  @progress/kendo-react-dateinputs";

export default function LongMonthFormatPicker() {
  return ([19659064]<>
      <h2>Format mois long</h2>
      <form[19659072]className="k-form k-mb-8">
        <div className="k-my-4">
          <label className="k-form-field">
            Format de date américain
            <DatePicker
              format={{
                jour: "numérique",
                année: "numérique",
                mois : "long",
              }}
            />
          </libellé>
        </div>
      </form>
    </>
  )[19659015];
}

Et mettez à jour le fichier App.js pour inclure notre nouveau composant.

src/App.js

import "@progress/kendo-theme-material /dist/all.css";
import "./App.css";
import DatePickers from "./components/DatePickers ";
import LongMonthFormatPicker de "./components/LongMonthFormatPicker";
fonction App()[196590{
  retour (
    <div className="App">
      <h1> Exemples de formats de date utilisant DatePicker</h1>
      <DatePickers />
      <LongMonthFormatPicker[19659023]/>
    </div>
  );
}

export default App;

Vous pouvez voir le résultat dans le gif ci-dessous. La date affichée commence par le nom complet du mois, puis est suivie du jour et de l'année, par exemple, 20 août 2021.

React Month Picker

Nous avons expliqué comment utiliser différents formats de date lors de la sélection d'un jour, d'un mois et d'une année spécifiques. Mais que se passe-t-il si nous ne voulons pas sélectionner un jour, mais seulement un mois et une année et les afficher dans un format comme 11/2021 ou August 21 ? Nous pouvons également le faire.

Par défaut, le calendrier DatePicker demande aux utilisateurs de sélectionner un jour, un mois et une année. Cependant, nous pouvons fournir un composant de calendrier personnalisé. Nous enveloppons le KendoReact Calendar et passons year comme bottomView et topView props.

src/components/MonthPickers. js

import { Calendar, DatePicker } from "@progress/kendo-react-dateinputs";

fonction  Calendrier personnalisé(accessoires) {
  retour (
    <Calendrier
      {...accessoires}
      topView="année"
      vue du bas="année"
    />
  );
}

export default fonction MonthPickers() {
  return ([19659064]<>
      <h2>Sélecteurs de mois</h2>
      <form  className="k-form k-mb-8">
        <label className="k-form-field mb-4">
          MM/aaaa
          <DatePicker width="100%" format="MM/yyyy " calendrier={CustomCalendar} />
        </libellé>
        <label className="k-form-field mb-4">
          aaaa/MM
          <DatePicker width="100%" format="yyyy/MM " calendrier={CustomCalendar} />
        </libellé>
        <label className="k-form-field">
          Mois année
          <DatePicker
            width="100%"
            format={{
              année : "2 chiffres",
              mois : "long",
            }}
            calendrier={CustomCalendar}
          />
        </label>
      </form>
    </>
  )[19659015];
}

src/App.js

import "@progress/kendo-theme-material/dist/all.css";
import "./App. css";
import DatePickers from "./components/DatePickers";
import LongMonthFormatPicker from ". composants/LongMonthFormatPicker";
import MonthPickers de "./components/MonthPickers";
fonction App()  {
  retour (
    <div className="App">
      <h1> Exemples de formats de date utilisant DatePicker</h1>
      <DatePickers />
      <LongMonthFormatPicker[19659023]/>
      <Month Pickers />
    </div>
  );
}

export default App;

Locale-Based React DatePicker

Si votre application sert des utilisateurs dans de nombreux pays différents, vous devez probablement obtenir les paramètres régionaux par défaut de l'utilisateur et autoriser un utilisateur à spécifier leurs propres paramètres régionaux. Le composant KendoReact DatePicker prend en charge la globalisation de première classe. Implémentons un DatePicker qui changera son format et la langue du calendrier en fonction des paramètres régionaux actuellement sélectionnés. Les quatre paramètres régionaux mentionnés au début de cet article seront utilisés.

Tout d'abord, nous avons besoin d'un composant SelectLocale qui fera trois choses :

• Obtenir le paramètre régional par défaut
• Autoriser un utilisateur à sélectionnez un paramètre régional dans la liste des locales
• Fournissez les paramètres régionaux actuellement sélectionnés via children

src/components/SelectLocale.js

import { useState } from "react";

const locales = ["en-US", "en- GB", "ar-DZ", "zh-Hans"];

const getDefaultLocale = ( ) => {
  retour navigateur.langues?.[0][19659025]|| locales[0];
};

exporter  default function SelectLocale(props) {
  const [locale, setLocale] = useState(getDefaultLocale());
  return (
    <> 
      <form className="k-form">
        <étiquette>
          Sélectionnez les paramètres régionaux :
          <select
            style={{ width: 150, marginLeft:[19659039]10, hauteur: 40, rembourrage: 5 }}
            valeur={locale}
            onChange={e => {
              setLocale(e.cible.valeur);
            }}
          >
            {locales.map((option, key) => (
              <option clé={clé} value={option }>
                {option}
              </option>
            ))}
          </sélectionnez>
        </libellé>
      </form>
      {props.children({ locale })}
    </[19659027]>
  );
}

Nous devons fournir la locale aux enfants, car nous devons la transmettre au composant KendoReact IntlProvider. Dans le fichier App.jsnous devons ajouter quelques importations. Tout d'abord, nous allons importer le composant SelectLocale que nous venons de créer et DynamicLocaleDatePicker que nous allons créer dans un instant. Cependant, nous devons également importer des données avec des informations de calendrier pour différents paramètres régionaux. Ces données proviennent des packages cldr-core et cldr-dates-full que nous avons installés au début.

src/App.js

import[19659014]"@progress/kendo-theme-material/dist/all.css";
import "./App.css";
import DatePickers  from "./components/DatePickers";
importLongMonthFormatPicker from "./components/LongMonthFormatPicker";
import[19459004de "./components/MonthPickers";
import SelectLocale from "./components/SelectLocale";
import  { IntlProvider, charge } de "@progress/kendo-react-intl";
import DynamicLocaleDatePicker de  "./components/DynamicLocaleDatePicker";

i mport weekData from "cldr-core/supplemental/weekData.json";
import usCaGregorian from "cldr-dates-full/main /en/ca-gregorian.json";
import usDateFields from "cldr-dates-full/main/en/dateFields.json";
 import gbCaGregorian de "cldr-dates-full/main/en-GB/ca-gregorian.json";
import gbDateFields de  "cldr-dates-full/main/en-GB/dateFields.json";
import zhCaGregorian from "cldr-dates-full/main/zh-Hans/ca -gregorian.json";
import zhDateFields from "cldr-dates-full/main/zh-Hans/dateFields.json";
import arCaGregorian from "cldr-dates-full/main/ar-DZ/ca-gregorian.json";
import arDateFields from[19659014]"cldr-dates-full/main/ar-DZ/dateFields.json";

load(
  semaineDonnées,
  usCagregorien,
  usDateFields,
  gbCagrégorien,
  gbChampsDate,
  zhCagrégorien,
  zhChampsDate,
  arCagrégorien,
  arDateChamps
);

fonction App() {
  retour (
    <div className="App">
      <h1> Exemples de formats de date utilisant DatePicker</h1>
      <DatePickers />
      <LongMonthFormatPicker[19659023]/>
      <MonthPickers />
      <SelectLocale>
        {({ paramètres régionaux }) => (
          <IntlProvider locale={locale}>
            <DynamicLocaleDatePicker />
          </IntlProvider>
        )}
      </SelectLocale>
    </div>
  );
}

export default App;

Last but not least, nous devons créer le composant DynamicLocaleDatePicker.

src/components/DynamicLocaleDatePicker.js

import { DatePicker  } de "@progress/kendo-react-dateinputs";

export default function DynamicLocaleDatePicker(props)  {
  return (
    <>
      <form className="k-form k-mb- 8">
        <div className="k-my-4">
          <label className="k-form-field">
            Format de date basé sur les paramètres régionaux-
            <Sélecteur de dates />
          </libellé>
        </div>
      </form>
    </>
  )[19659015];
}

Le format DatePicker et la langue du calendrier seront désormais mis à jour en fonction des paramètres régionaux sélectionnés, comme indiqué dans le gif ci-dessous.

React DateTimePicker

Jusqu'à présent, nous avons couvert un quelques façons différentes de formater la date. Voyons maintenant le temps de formatage. KendoReact propose un composant React DateTimePicker qui est une version enrichie du DatePicker. Outre la sélection d'une date, il permet également aux utilisateurs de sélectionner l'heure.

Nous profiterons de la sélection de paramètres régionaux que nous avons implémentée précédemment pour le composant DatePickermais fournirons également nos propres formats personnalisés. Maintenant, créez un nouveau composant appelé DateTimePickerWithLocale.

src/components/DateTimePickerWithLocale.js

import { DateTimePicker }[1965901433]from[1965901433] ]"@progress/kendo-react-dateinputs";

export default function DateTimePickerWithLocale() {
  return  (
    <form className="k-form k-mb-8">
      <div className="k-my-4">
        <label className="k-form-field">
          Sélecteur de date et d'heure basé sur les paramètres régionaux-
          <DateTimePicker />
        </label>
      </div>
      <div className=[19659015]"k-my-4">
        <label className="k-form-field">
          Date et heure longues
          <DateTimePicker format={"jj-MM-aaaa hh:mm:ss a"} />[19659068]
        </label>
      </div>

      <div className="k-my-4">
        <label className="k-form-field">
          Format personnalisé
          <DateTimePicker
            format={{
              année : "numérique",
              mois : "court",
              heure: "2 chiffres",
              minute: "2 chiffres",
              deuxième : "2 chiffres",
            }}
          />
        </label>
      </div>
    </formulaire>
  );
}

Enfin, importez et restituez le composant Kendo DateTimePicker dans le fichier App.js.

src/App.js

import " @progress/kendo-theme-material/dist/all.css";
import "./App.css";
import DatePickers from[19659014]"./components/DatePickers";
import LongMonthFormatPicker from "./components/LongMonthFormatPicker";
import MonthPicker from "./components/MonthPickers";
import SelectLocale from "./components/SelectLocale";
import { IntlProvider, charge } de "@progress/kendo-react-intl";
import DynamicLocaleDatePicker de[196590]"./components/DynamicLocaleDatePicker";
 import DateTimePickerWithLocale from "./components/DateTimePickerWithLocale";

import weekData from "cldr-core/supplemental/weekData.json 19659015];
import usCaGregorian from "cldr-dates-full/main/en/ca-gregorian.json";
import usDateFields  from "cldr-dates-full/main/en/dateFields.json";
import gbCaGregorian from "cldr-dates-full/main/en-GB /ca-gregorian.json";
import gbDateFields de "cldr-dates-full/main/en-GB/dateFields.json";
 importer zhCaGregorian de "cldr-dates-full/main/zh-Hans/ca-gregorian.json";
import zhDateFields de  "cldr-dates-full/main/zh-Hans/dateFields.json";
import arCaGregorian fro m "cldr-dates-full/main/ar-DZ/ca-gregorian.json";
import arDateFields from "cldr-dates-full/main /ar-DZ/dateFields.json";

load(
  semaineDonnées,
  usCagregorien,
  usDateFields,
  gbCagrégorien,
  gbChampsDate,
  zhCagrégorien,
  zhChampsDate,
  arCagrégorien,
  arDateChamps
);

fonction App() {
  retour (
    <div className="App">
      <h1> Exemples de formats de date utilisant DatePicker</h1>
      <DatePickers />
      <LongMonthFormatPicker[19659023]/>
      <MonthPickers />
      <h2>Locale-Basé DatePicker </h2>
      <SelectLocale>
        {({ paramètres régionaux }) => (
          <IntlProvider locale={locale}>
            <DynamicLocaleDatePicker />
            <h2>DateTimePicker</h2>
            <DateTimePickerWithLocale />
          </IntlProvider>
        )}
      </SelectLocale>
    </div>
  );
}

export default App;

You can see the final result in the gif below.

Wrap-up

That’s it. As you now know, date and time formats may vary across different countries. It can be quite tricky to create a React DatePicker that supports date and time formatting with locales. Fortunately, we can use KendoReactwhich provides many feature-rich and accessible components that can be easily configured and customized.