Apprendre à connaître le KendoReact DateRangePicker

Soyons honnêtes, la sélection des dates n’est pas la plus intéressante ou glamour problème d’ingénierie logicielle à résoudre – c’est pourquoi nous l’avons résolu pour vous, avec le KendoReact DateRange Picker !

Idéalement, les outils de sélection de date devraient être si complètement sans friction qu’un utilisateur ne remarque même pas vraiment qu’ils sont là. J’irais même jusqu’à dire que si un utilisateur remarque activement un outil de sélection de plage de dates… il y a probablement quelque chose qui ne va pas. Un bon design, comme on dit, est invisible. Mais ce n’est pas parce que l’utilisateur ne devrait pas y penser que nous (les développeurs) avons le même luxe.

Entrer le DateRangePicker Composant React de Progrès KendoRéagir. C’est un outil pour – vous l’avez deviné – sélectionner rapidement et facilement une plage de dates. C’est également un composant hautement personnalisable qui offre une excellente expérience utilisateur ainsi qu’une excellente expérience de développeur. Il dispose d’une variété d’options pour personnaliser son apparence et son comportement, y compris les dates minimales et maximales, les valeurs par défaut, les dates désactivées, etc.

Caractéristiques

Le composant Date Range Picker est absolument emballé avec des fonctionnalités. Bien sûr, il inclut tout ce que vous attendez : validation, valeurs par défaut, etc., mais il inclut également des fonctionnalités avancées (telles que la sélection inversée et la prise en charge complète du clavier) que vous ne trouverez pas dans n’importe quel composant. Jetons un coup d’œil à quelques-unes de mes fonctionnalités préférées et plus uniques de ce composant.

Inverser la sélection de la date et permuter la date

La plupart du temps, lorsque nous traitons de la sélection de la plage de dates, nous partons du principe que la date de fin viendra après la date de début. Parfois, cependant, nous travaillons sur quelque chose d’un peu différent et nous avons besoin que nos utilisateurs puissent sélectionner des dates où la date de fin est antérieure à la date de début. C’est l’une de ces petites bizarreries auxquelles vous ne penseriez pas… jusqu’à ce que vous soyez confronté à une situation où vous besoin et vous avez passé des heures à vous battre avec vos composants pour essayer d’y arriver.

Heureusement, le composant DateRangePicker facilite les choses ! Réglez simplement le allowReverse propriété à true, et vous êtes prêt à partir ! En plus de la logique de sélection inversée, vous pouvez également rendre un bouton pour échanger le start et
end valeurs de date. Pour afficher le bouton d’échange, réglez à la fois le swapButton et
allowReverse propriétés à true. Cela ajoutera un nouveau bouton entre les zones de saisie de date qui permet à l’utilisateur de basculer rapidement le start et end dates d’avant en arrière, d’un simple clic !

Personnalisation et style

Le DateRangePicker (ainsi que tous les composants de KendoReact) est également très facile à personnaliser et à styliser.

Vous pouvez remplacer les composants DateRangePicker suivants par des composants personnalisés :

• Entrées de date de début et de finqui rend les entrées pour le start et end sélection de plage du DateRangePicker
• Calendarqui affiche le MultiViewCalendar dans la fenêtre contextuelle du DateRangePicker
• Apparaitrequi rend le popup qui contient le MultiViewCalendar

Cela vous permet de créer une expérience utilisateur vraiment unique et personnalisée. De plus, le DateRangePicker prend également en charge la prise en charge complète des thèmes, de sorte que vous pouvez facilement faire correspondre l’apparence de votre application, quel que soit le système de conception que vous utilisez ! Les composants peuvent être facilement thématisés via les thèmes intégrés de KendoReact (Material, Fluent, Bootstrap et notre thème par défaut), CSS personnalisé ou Générateur de thèmes.

Accessibilité

En ce qui concerne les outils de saisie, l’accessibilité est absolument crucial … et pourtant, c’est quelque chose de difficile à faire par soi-même, et souvent absent des autres bibliothèques de composants.

Le KendoReact DateRangePicker, cependant, inclut complet accessibilité support—permettant à tous vos utilisateurs de naviguer facilement dans votre application. Il a un rôle intégré et des attributs aria-label, et fournit une prise en charge complète de la navigation au clavier. Les aria-valuemin, aria-valuemaxet aria-valuenow Les propriétés définissent les valeurs d’accessibilité lorsque l’utilisateur entre une valeur ou interagit avec le DateRangePicker. Il suit également la Bonnes pratiques WAI-ARIA pour la mise en œuvre de la navigation au clavier pour sa composante
rôleet il a été testé avec plusieurs lecteurs d’écran populaires, vous pouvez donc être assuré que vous offrez le meilleur à vos utilisateurs.

Conclusion

Le composant DateRangePicker est un outil essentiel pour sélectionner rapidement et facilement une plage de dates dans une application React. Sa large gamme de fonctionnalités et d’options personnalisables garantit une expérience utilisateur exceptionnelle, et sa prise en charge complète de l’accessibilité signifie qu’il est intuitif pour tout le monde. Avec ses fonctionnalités et capacités avancées, il s’agit d’un outil puissant pour une entrée qui peut sembler d’une simplicité trompeuse.

Comme toujours, si vous n’utilisez pas déjà la bibliothèque KendoReact, vous pouvez essayez-le entièrement gratuitement pendant 30 jours! Essayez-le et voyez à quel point cela simplifie le développement d’applications React.