Comment utiliser et personnaliser le KendoReact DatePicker

Sortez votre calendrier et écrivez-nous pour cette plongée en profondeur dans toutes les fonctionnalités et fonctionnalités du KendoReact DatePicker!

Si vous avez déjà été dans la position de devoir créer votre propre composant de sélecteur de date, alors vous sachez que ce n'est pas une tâche facile. Il y a tellement de situations où le sélecteur de date HTML par défaut ne le coupe tout simplement pas. Vous avez besoin d'un sélecteur de date fonctionnellement complexe, capable de définir des plages de dates minimales et maximales et de valider la sélection de l'utilisateur … , et être facile à implémenter et à maintenir pour VOUS.

Il existe de nombreuses bibliothèques hyper-spécifiques que vous pouvez utiliser pour ajouter un composant de sélecteur de date à votre application. Cependant, chaque fois que vous ajoutez une nouvelle dépendance à votre code, vous vous chargez également de la vérifier correctement et de gérer tout changement de rupture associé à cette dépendance à l'avenir. Pouvez-vous garantir combien de temps cette bibliothèque sera activement maintenue ? Est-ce bien documenté ? Le composant qu'il propose est-il entièrement accessible ? Ou est-ce que cette bibliothèque est maintenue par une personne au hasard dans le Nebraska depuis 2003et juste une autre situation left-pad attend de se produire ?

Vous pouvez éviter ces complications en choisissant une bibliothèque de composants complète (comme KendoReact) qui vous offre plus qu'une solution unique au problème que vous résolvez actuellement. Alors sortez votre calendrier et écrivez-nous pour les prochaines minutes, car nous allons approfondir toutes les caractéristiques et fonctionnalités du KendoReact DatePicker—un seul des nombreux composants magnifiques et entièrement accessibles qui composent la KendoReact Date Inputs Library !

Le KendoReact DatePicker dispose d'une vaste gamme de fonctionnalités impressionnantes, mais commençons par installer et exécuter le composant de base dans notre application. Dans cet exemple, j'utilise mon application de démonstration LKARS, que vous êtes invité à cloner et à utiliser. Vous pouvez trouver le dépôt ici . Il convient de noter que cette application a été fortement thématique pour ressembler au système de menu du vaisseau Star Trek, donc les couleurs et les polices seront différentes de celles de nos documents. Si vous souhaitez appliquer un thème personnalisé à vos composants KendoReact, jetez un œil à cette procédure pas à pasainsi qu'à ce blog sur l'utilisation de Sass pour le style de composant personnalisé.

Nous allons ajouter le composant React DatePicker à la page Calendrier de notre application, afin que les membres d'équipage de notre faux vaisseau spatial puissent utiliser le calendrier pour demander facilement un congé à terre. Parce que, bon, l'équilibre travail/vie personnelle est important.

Obtenir le React DatePicker dans l'application

Pour utiliser le DatePicker, nous devons d'abord installer et importer la bibliothèque KendoReact Date Inputs avec npm install @progress/kendo-react-dateinputs. Une fois que c'est prêt, vous pouvez importer DatePicker dans votre composant et l'utiliser. Nous n'allons pas nous soucier de faire une configuration pour le moment – allons-y et voyons à quoi cela ressemble dès la sortie de la boîte.

import { DatePicker } from[19659012]"@progress/kendo-react-dateinputs"; 
export default function Schedule() { 
  return  ( 
    <h1>Horaire des congés à terre</h1> 
    <p> Veuillez saisir vos dates de congé à terre demandées ci-dessous, et votre commandant approuvera ou refusera votre demande dans les 5 jours</p>  
    <DatePicker /> 
  )
}; 

Ainsi comme vous pouvez le voir, nous avons maintenant notre DatePicker qui apparaît dans notre composant Schedule. Vous pouvez cliquer sur l'icône du calendrier pour développer la vue et faire défiler pour parcourir les mois (ou même les années) sur le côté gauche. Et le bouton "Aujourd'hui" dans le coin supérieur droit nous ramènera à la date actuelle. Lorsque nous choisissons une date, il met à jour la copie de remplissage mois/jour/année avec la date sélectionnée pour confirmer la sélection à l'utilisateur.

Limitation de la sélection de l'utilisateur à une plage de dates spécifique

C'est tout très bien, mais nous ne voulons pas que quiconque puisse sélectionner des dates passées pour son congé à terre (les voyages dans le temps sont généralement mal vus en vertu de la directive temporelle principale). Et nous ne voulons pas non plus que quiconque demande un congé à terre dans un avenir lointain. Nous allons donc utiliser les valeurs min et max pour définir une plage raisonnable parmi laquelle nos utilisateurs peuvent choisir.

import { DatePicker } from "@progress/kendo-react-dateinputs";
export default function Schedule()  { 
  const max = nouveau Date(2021, 11, 31)[19659013];
  const aujourd'hui = nouveau Date();
  retour ( 
    < h1>Schedule Shore Leave</h1> 
    <p>Veuillez saisir ci-dessous les dates de votre demande de congé à terre , et votre commandant approuvera ou refusera votre demande dans un délai de 5 jours<[19659024]/p> 
    <DatePicker min={aujourd'hui} max={max} /> 
  ) 
}; 

Le DatePicker attend des objets JS Date lors de la transmission de ces min et max propriétés. Si vous avez besoin d'un petit rafraîchissement sur ceux-ci (et qui n'en a pas besoin ; les mois indexés à zéro semblent juste bizarres ), je recommande les documents MDN.

Dans ce cas, nous avons autorisé notre équipage à décoller des jours entre la date d'aujourd'hui et la fin de l'année. Vous pouvez voir que notre calendrier effectue automatiquement de très bons ajustements UX pour refléter cela – les dates passées non sélectionnables ont été grisées et le défilement des mois sur le côté gauche n'affiche désormais que les mois dans notre fenêtre disponible.[19659003]

Validation de la sélection de l'utilisateur

Si nous avons un formulaire complet configuré sur notre page enveloppant notre composant DatePicker (ce que nous devrions faire de toute façon, car c'est une bonne pratique d'accessibilité), alors il y a un validationMessage info-bulle intégrée directement dans le composant qui on peut en profiter ! Donc, tout ce que j'ai à faire est de transmettre la copie que je veux afficher en cas d'erreur, et si l'entrée de l'utilisateur ne se valide pas correctement, cette info-bulle s'affichera automatiquement lors de la soumission du formulaire.

C'est l'une de ces choses que semble petit, mais est en fait énorme, à la fois pour l'utilisateur et pour nous en tant que développeurs. C'est vraiment pénible de configurer cela manuellement pour chaque élément de saisie de formulaire, mais aussi… c'est tellement utile pour l'utilisateur ! Combien de fois avez-vous été coincé à faire défiler un formulaire que vous avez rempli, essayant de deviner où vous vous êtes trompé parce qu'il ne vous permet pas de le soumettre ? La validation et la messagerie intégrées dans le composant DatePicker facilitent la mise en œuvre de ces meilleures pratiques. ! » title= »Date prior to min validation error »/>

Désactivation de l'interaction utilisateur

De même, nous voulons parfois empêcher les gens de pouvoir utiliser le DatePicker – peut-être que ce membre d'équipage a déjà utilisé tous ses congés à terre alloués. Dans ce cas, nous voudrons désactiver l'ensemble du composant. Cela peut être fait facilement en définissant simplement la propriété disabled sur true. Cela fait disparaître tout le composant et empêche l'utilisateur de saisir des dates ou d'étendre la vue du calendrier.

Définition d'une date par défaut

En outre , il y a des moments où nous voudrons suggérer des dates à l'utilisateur. Dans ce cas, nous pouvons utiliser la prop defaultValue pour que le composant se charge avec une sélection par défaut en place—par exemple, je aime définir la valeur par défaut à la date d'aujourd'hui. Si nous ne définissons pas de valeur par défaut, nous obtiendrons l'espace réservé mois/jour/année à la place.

const aujourd'hui = nouvelle date();  

Définition d'une date ciblée par défaut

Le KendoReact DatePicker vous permet également de définir une date ciblée, qui est la date qui est automatiquement mise en surbrillance lorsque l'utilisateur développe la vue du calendrier. Si aucune date focalisée n'est définie, elle se concentrera par défaut sur la date d'aujourd'hui, mais vous pouvez la remplacer par autre chose en modifiant la propriété focusedDate.

const focus = new Date (2021, 11, 31);  

Changement du format de date

Si vous travaillez dans un environnement qui doit prendre en charge plusieurs formats de localisation de date (comme, disons, un vaisseau spatial), alors bonne nouvelle, vous pouvez facilement le faire aussi, puisque le DatePicker vous permet de passer plusieurs options de format différentes. Vous pouvez voir tous les différents formats de date pris en charge par KendoReact dans le dépôt kendo-intl GitHub. Vous pouvez également ajuster le calendrier pour afficher les numéros de chaque semaine sur le côté gauche en définissant weekNumber sur true. Ces deux éléments vous permettent d'ajuster le DatePicker pour qu'il corresponde au format de date le plus reconnaissable pour vos utilisateurs.

Résumé

Et voilà ! Un magnifique React DatePicker, personnalisable et entièrement accessible, mis en œuvre dans notre application en moins de 10 minutes. Si vous avez déjà essayé de personnaliser le sélecteur de date HTML par défaut ou (pire encore) d'en créer un entièrement à partir de zéro, alors vous savez à quel point un composant DatePicker plug-and-play est un énorme gain de temps !

Pour plus d'informations à propos de ce composant et de tout ce qu'il peut faire, consultez les documents KendoReact DatePickeret consultez KendoReact pour plus d'informations sur ce qu'une bibliothèque complète de composants entretenue par des professionnels peut faire pour vous ! Bon codage !