Choisir le bon composant d'interface utilisateur Datepicker

Trouver un bon Datepicker pour votre application devrait être facile, mais il existe de nombreuses options et de nombreux éléments à prendre en compte.

Comprendre ce qu’il faut rechercher et les fonctionnalités dont vous pouvez imaginer avoir besoin pour votre projet sera très utile et constituera une bonne chose à prendre en compte lors du choix de votre sélecteur de date.

Performance

Avant de prendre une décision finale sur un composant (ou bibliothèque) datepicker particulier, vous devez utiliser les outils de performance React Performance pour analyser les performances et essayer de reproduire un scénario ou un cas d'utilisation réel similaire à celui que vous utiliserez en production.

Le blog de React.js Présentation du React Profiler est un bon outil pour mesurer les performances des composants React dans le navigateur. Tout comme vous profileriez les composants que vous construisez et libérez vous-même, lorsque vous recherchez un composant à intégrer à votre projet, vous devez toujours le tester au sein de votre propre application.

Support des paquets

Toutes les bibliothèques de composants React devraient vous permettre d'installer via npm ou GitHub. Il devrait être simple de trouver les packages, de les installer dans votre projet et de vous mettre au travail.

Fonctionnalités indispensables dans n'importe quel datepicker

La liste suivante de fonctionnalités repose en grande partie sur mon expérience dans la création d'applications métier et sur différents scénarios pour lesquels j'ai besoin d'un sélecteur de date.

Une expérience utilisateur propre

Nous ont tous vu les sélecteurs de date sur les pages Web qui utilisent trois menus déroulants de navigateur natif différents pour la date du mois et l'année. Ce n'est pas une expérience utilisateur propre et il y a plusieurs raisons pour lesquelles vous ne voulez probablement pas faire cela dans votre application. La première est qu'il est beaucoup plus difficile d'échanger l'ordre des menus déroulants que de simplement fournir au sélecteur de date un format de date différent. Deuxièmement, vous laissez le développeur obligé de rassembler ces valeurs distinctes après la sélection afin d'obtenir la date complète à laquelle nous devons vraiment travailler.

Une autre raison est qu’il est beaucoup plus difficile de faire en sorte que l’utilisateur sélectionne réellement chaque menu déroulant, ce qui crée une solution globale moins évolutive qui ne convient pas aux utilisateurs. Les menus déroulants comme pointeur de date fournissent également le pire utilisateur Expérience pour les utilisateurs sur mobile. Ma recommandation est de ne pas utiliser cette méthode de sélection de date. C'est là que le puissant sélecteur de date entre en jeu!

Saisie, Calendrier ou les deux

La sélection d'un sélecteur de date React offrant une localisation fournit une Meilleure expérience utilisateur. Beaucoup de datepickers vous offrent la possibilité de n’utiliser qu’une entrée masquée avec une date masquée, qui a généralement l'apparence d'un texte fictif indiquant le mois ou le jour, suivi de l'année. p, vous serez généralement en mesure de formater la date très facilement. Cela nous donne la possibilité pour les développeurs de déterminer le format et de le définir par localité. Aux États-Unis, je veux d'abord le mois, mais au Royaume-Uni, je veux d'abord.

La saisie est excellente pour ceux qui utilisent le plus souvent leurs claviers pour remplir des formulaires, mais ce n'est pas tous les utilisateurs – d'autres dépendent de la souris ou du doigt pour faire leur sélection dans un calendrier. C'est pourquoi je pense que votre sélecteur de date doit présenter ces deux options et que la plupart des sélecteurs de date que je rencontre dans les formulaires fournissent les deux options.

Contrôle correct du clavier et de l'expérience utilisateur

Un sélecteur de date doit offrir une bonne expérience utilisateur, des commandes de clavier solides, une fonctionnalité mobile puissante et la possibilité de travailler avec des gestes. Demandez-vous si le composant que vous avez sélectionné peut tout faire.

Chaque application est différente. Lors de la réservation d'un vol, nous avons généralement besoin de la fonctionnalité de plage de dates, mais disposer d'un bouton pour la date du jour ou la possibilité de sélectionner l'heure n'est pas aussi important. Cependant, lorsqu’ils visitent le site Web de votre dentiste ou choisissent une visite chez le médecin ou le meilleur moment pour faire réparer votre voiture, ces scénarios peuvent nécessiter un sélecteur de date unique avec la possibilité de choisir la date et l’heure. Les cours sont un datepicker anniversaire. À mon avis, la meilleure façon de procéder consiste à suivre un processus en trois étapes. Sélectionnez le mois, puis le jour et enfin l'année de la date que vous essayez de saisir. Étant donné que différentes applications présentent différents scénarios, les meilleurs datepickers sont celles qui offrent au développeur une variété d’options prêtes à l’emploi.

Assistance au niveau entreprise

En termes simples, les composants qui ne sont pas licenciés rarement avoir tout type de soutien en dehors de l'aide de la communauté à volonté. Tout le monde, depuis les grands magasins de développement Web et les entreprises jusqu'aux entreprises de conseil composées d'une seule personne, a souvent des délais serrés et ses développeurs poussent la technologie à l'extrême. Avec une licence payante, vous bénéficiez d'un accès supplémentaire à une équipe possédant une connaissance approfondie des composants avec lesquels vous travaillez.

Quel est le meilleur datepicker?

J'ai partagé avec vous mes critères clés pour: pour évaluer un sélecteur de date React pour votre prochaine application: performances, prise en charge des packages, UX propre, options d'entrée, contrôle du clavier et prise en charge au niveau de l'entreprise. Si vous croyez ne pas pouvoir vivre sans certaines caractéristiques, mettez-les dans les commentaires et indiquez-nous quels sont vos favoris.

Mon objectif ici n'est pas de vous pousser à choisir un datepicker, Je préférerais vous donner quelques-unes de mes idées sur ce qu'est le meilleur datepicker et vous laisser décider lequel choisir. Cela dit, si le KendoReact DatePicker figure sur votre liste, votre ami Carl a mis au point un excellent article intitulé "Libérez le pouvoir de la composante KendoReact Datepicker." une excellente ressource pour apprendre à exploiter ce pouvoir particulier de React DatePicker et à construire quelque chose d'extraordinaire. En le lisant, vous gagnerez peut-être un peu de temps lors du processus d'évaluation.

En fin de compte, je vous recommande toujours de faire preuve de diligence raisonnable et de rechercher le datpicker qui vous convient le mieux.