Sélectionner des dates dans des formes angulaires à l'aide des composants de date de Kendo UI

Dans cet article, nous allons examiner trois manières différentes de sélectionner des dates dans votre application Angular, en utilisant différents composants Date Input de Kendo UI.

Remarque: vous avez besoin de cette information pour Vue, pas Angular? Nous avons un autre guide pour vous ici .

En termes de croissance, JavaScript est en train de devenir un des langages de programmation les plus populaires. Cette croissance s'accompagne d'une liste énorme de frameworks et de bibliothèques cherchant à atténuer la douleur subtile du développement.

Créer une application à partir de rien n'a jamais été une tâche facile. Elle nécessite beaucoup de temps, de travail, de patience et de compétences. Ainsi, l’utilisation d’une de ces nombreuses bibliothèques / infrastructures peut accélérer le développement et rendre la vie un peu plus agréable. Kendo UI se distingue en tant que bibliothèque possédant des composants qui peuvent être utilisés pour créer des applications complètes.

Kendo UI est une bibliothèque utilisée pour créer des applications plus rapidement. rythme. Il fournit des composants d'interface utilisateur pour des bibliothèques telles que jQuery Angular React et Vue . Il est livré avec plus de 20 composants pour la création de graphiques. , tables de données et glisser-déposer des pages. La bibliothèque est facilement personnalisable et fournit un ensemble de thèmes pour Material UI, Bootstrap, etc.

Les composants de Kendo UI sont distribués sous la forme de plusieurs packages npm. Vous ne craignez donc pas de gonfler votre application avec des composants inutiles et d’accroître votre bundle de build. Il offre des composants pour la gestion de grands ensembles de données et pour une visualisation aisée des données.

Nous savons tous à quel point il est difficile de créer des éléments d’entrée permettant aux utilisateurs de saisir des dates. Cela fait plus de 20 ans et les navigateurs n’ont toujours pas proposé de méthode unifiée pour la sélection des dates. Il y avait un peu d’espoir lorsque Chrome a introduit le type d’entrée date mais il n’a pas été adopté par d’autres types de navigateurs. Personne ne crée donc avec confiance une entrée de type . date dans leur balise.

Certains des nombreux composants de l'interface utilisateur de Kendo sont les composants Date Input . Nous examinerons trois variantes différentes des composants de saisie de date et leur utilisation dans les formulaires. L'installation du package Entrées de date dans votre application Angular vous donnera accès à plusieurs autres composants tels que DatePicker, Calendar, TimePicker, etc. Dans cet article, nous verrons comment nous pouvons utiliser ces composants dans notre application Angular.

Pour suivre ce tutoriel, une compréhension de base de Angular est requise. Assurez-vous également que Node est installé sur votre ordinateur personnel. Si vous ne connaissez pas encore Angular, veuillez suivre le tutoriel officiel ici et télécharger le noeud pour votre PC ici si vous ne l'avez pas déjà fait.

Nous allons utiliser ces outils pour construire notre application:

Initialisation de l'application et installation des dépendances

Pour commencer, nous allons utiliser le CLI (interface de ligne de commande) fourni par l'équipe Angular pour initialiser notre projet.

Tout d'abord, installez le CLI en en cours d'exécution npm install -g @ angular / cli . npm est un gestionnaire de paquets utilisé pour installer des paquets. Il sera disponible sur votre PC si vous avez Node installé; sinon, téléchargez le nœud ici .

Pour créer un nouveau projet Angular à l'aide de la CLI, ouvrez un terminal et exécutez:

 dans les nouvelles dates kendo --style = scss 

Cette commande est utilisé pour initialiser un nouveau projet angulaire; le projet utilisera SCSS comme pré-processeur.

Ensuite, exécutez la commande suivante dans le dossier racine du projet pour installer les dépendances:

     Ng add @ progress / kendo-angular-dateinputs

Ouvrez un terminal dans le dossier du projet et démarrez l'application en exécutant ng serve . Si vous ouvrez votre navigateur et visitez le lien http: // localhost: 4200 vous devriez voir la capture d'écran ci-dessous si tout s'est bien passé.

DatePicker Component [19659012] Le composant Kendo UI DatePicker est utile pour sélectionner des dates dans les formulaires. Il combine les fonctionnalités des composants DateInput et Calendar. Ce composant prend en charge les plages de dates, l'accessibilité, la navigation au clavier, le formatage de la date, etc. Pour commencer avec le composant DatePicker, ouvrez le fichier app.component.html de votre projet et remplacez le contenu par l'extrait ci-dessous:

     < kendo-datepicker >  </  kendo-datepicker >  

Un rendu simple pour Kendo UI DatePicker. Si vous accédez à http: // localhost: 4200, vous devriez voir le sélecteur de date en flux continu.

Le DatePicker ne nous est pas vraiment utile dans son état par défaut. Nous voulons pouvoir transmettre des valeurs de date au composant et obtenir également la sélection d’un utilisateur dans le composant. Le composant DatePicker prend en charge l'utilisation de liaisons – vous pouvez passer une valeur de date à la liaison du composant et le composant affichera la date liée.

Mettez à jour le app.component.ts . fichier pour créer une nouvelle propriété à associer au composant DatePicker. Ouvrez le fichier et créez une propriété appelée aujourd'hui :

    
    
     import   { Composant }   de   '@ angular / core' ; [
    @  Composant  ( {
      sélecteur :   'app-root' 
      templateUrl :   './ app.component.html' 
      styleUrls :   [ './ app.component.scss' ] 
    } ) 
     export   class   AppComponent   19659032] {
      aujourd'hui  =   new   Date  () 
    } 

Ensuite, mettez à jour le fichier de modèle pour qu'il utilise la valeur aujourd'hui du composant DatePicker. Ouvrez le fichier app.component.html et mettez-le à jour pour ajouter une valeur obligatoire pour le DatePicker:

     < kendo-datepicker  [value] =  "  date  " >  </  kendo-datepicker > 

Si vous vérifiez le navigateur, vous verrez que la vue est mise à jour avec la date du composant.

Avec cette mise à jour, nous peut transmettre des valeurs du fichier de composant au modèle, mais l'entrée d'un utilisateur ne sera pas mise à jour car nous avons utilisé une liaison unidirectionnelle. Pour transmettre les valeurs de composant à la vue et inversement, nous devons mettre à jour la liaison de la valeur .

Mettez à jour le fichier app.component.html pour utiliser la méthode bidirectionnelle. binding:

     < kendo-datepicker  [(value)] =  " aujourd'hui "  >  </  kendo-datepicker > 

Nous pouvons également utiliser les formulaires réactifs avec le composant DatePicker. Vous pouvez simplement créer un groupe de formulaires et affecter la propriété today à un FormControl . Mettez à jour le fichier app.component.html pour qu'il soit similaire à l'extrait de code ci-dessous:

     // app.component.html
     < form  [formGroup] =  " form "   (submit)  =  " onSubmit () "  ] > 
       < kendo-datepicker   formControlName  =  " aujourd'hui "  >  </  kendo-datepicker  ]> 
       < button   type  =  " submit "  >  log  </  bouton  ]> 
     </  forme > 

Dans l’extrait ci-dessus, nous utilisons l’approche des formulaires réactifs en créant un groupe de formulaires pour gérer les contrôles de formulaire. Cette approche basée sur un modèle garantit la synchronisation des valeurs entre la vue et le composant.

Mettez à jour le fichier app.component.ts pour créer la propriété du groupe de formulaires:

     import   { Composant }   à partir de   '@ angular / core' ; 
     import   { FormControl  FormGroup ].   ] de   '@ angular / formes' ; 
    @  Composant  ( {
      sélecteur :   'app-root' 
      templateUrl :   './ app.component.html' 
      styleUrls :   [ './ app.component.scss' ] 
    } ) 
     export   class   AppComponent   19659032] {
      today  =   new   Date  () ; 
      form  =   new   FormGroup  ( {
        aujourd'hui :   nouveau   FormControl  ( ce .  aujourd'hui ) 
       ) 
       sur Soumission  ([19659024])  {
        console .  log  ( ceci .  forme .  valeur ) 
      } 
    } 

Après cette mise à jour, vous pouvez cliquer sur le bouton d'envoi après la mise à jour de DatePicker pour enregistrer les valeurs mises à jour dans la console.

Mise en forme de dates

à l'aide du format . contraignant, vous pouvez spécifier un format d'affichage pour la date sélectionnée par l'utilisateur. Vous pouvez trouver les formats supportés ici. Pour formater la date, mettez à jour le composant avec une liaison au format et indiquez-lui l'un des formats pris en charge.

Dans le fichier app.component.ts nous allons. choisissez l'un des formats pris en charge à utiliser sur le composant. Ouvrez le fichier et créez une propriété appelée format :

     import   { Composant }   de   '@ angular / core' ; 19659048] import   { FormControl  Groupe de formes }   de   '@ angular / forms' ; 
    @  Composant  ( {
      sélecteur :   'app-root' 
      templateUrl :   './ app.component.html' 
      styleUrls :   [ './ app.component.scss' ] 
    } ) 
     export   class   AppComponent   19659032] {
      format  =   "EEEE, MMMM d, y" ; 
       ... 
    } 

Ensuite, mettez à jour le modèle pour utiliser le format du composant DatePicker:

     < form  [formGroup] =  "form  form "   (envoyez)  =  " onSubmit () "  > 
       < kendo-datepicker   formControlName  =  " aujourd'hui "   [format]  =  "
"  ] " >  </  kendo-datepicker >         < button   type  =  " submit "  >  log  </  bouton  ]>       </  forme >  

L'affichage sur l'élément d'entrée sera mis à jour pour afficher la date au format suivant:

     dimanche 17 mars 2019 

Le composant peut prendre d'autres liaisons pour rendre l'entrée désactivée ou en lecture seule. Vous pouvez également simplifier la vue du calendrier étendu en supprimant la navigation rapide. Pour ce faire, ajoutez la liaison suivante au composant sélecteur de date:

     [navigation] = "false" 

Le DatePicker affiche désormais une vue simplifiée. Nous examinerons ensuite le composant DateRange qui peut être utilisé pour sélectionner une plage de dates. Pour en savoir plus sur le composant DatePicker dans la documentation officielle cliquez ici .

Composant DateRange

Le composant DateRange est utile pour visualiser la sélection des dates de début et de fin. En règle générale, vous disposez de deux éléments d'entrée pour obtenir les dates de début et de fin, mais le composant DateRange les combine pour fournir un sélecteur de date agréable sur le plan visuel.

Ouvrez le fichier app.component.html et mettez-le à jour. pour rendre le composant DateRange. Vous pouvez commenter le composant DatePicker si vous aimez:

     < kendo-daterange > 
       < étiquette > 
         < span   class  =  " étiquette "  >  Début  </  span  ]> 
         < kendo-dateinput   kendoDateRangeStartInput  [(value)] =  " range.start "  >  </  kendo-dateinput > 
       </  étiquette > 
       < étiquette > 
         < span   class  =  " étiquette "  >  Fin  </  span  ]> 
         < kendo-dateinput   kendoDateRangeEndInput  [(value)] =  " range.end "  >  </  kendo-dateinput > 
       </  étiquette > 
     </  kendo-daterange > 

Le composant DateRange exploite le composant DateInput en transmettant deux attributs kendoDateRangeStartInput et kendoDateRangeEndInput sur les éléments de début et de fin. Ces attributs sont utilisés pour décrire les éléments de début et de fin, ce qui aide le composant DateRange à calculer les valeurs.

Mettez à jour le fichier app.component.ts pour créer une propriété range . utilisé dans le modèle:

     import   { Composant }   de   '@ angular / core' ; 
     import   { FormControl  FormGroup }   de   '@ angular / forms' ; 
    @  Composant  ( {
      sélecteur :   'app-root' 
      templateUrl :   './ app.component.html' 
      styleUrls :   [ './ app.component.scss' ] 
    } ) 
     export   class   AppComponent   19659032] {
       ... 
      range  =   { start :   null  fin :   null  } ; 
    } 
    }. 

Après cette mise à jour, lorsque vous accédez à http: // localhost: 4200, vous pouvez voir le composant DateRange. Il devrait ressembler à la capture d'écran ci-dessous:

[19659004] Vous pouvez également gérer la correction automatique des valeurs de date pour empêcher un utilisateur d'entrer une date de début supérieure à la date de fin, et inversement. Le composant DateRange utilise un attribut autoCorrectOn qui détermine quand le composant gérera la correction automatique.

Trois valeurs possibles doivent être fournies à l'attribut autoCorrectOn :

1. . flou : la correction automatique s'exécutera une fois que l'utilisateur aura cliqué la mise au point sur l'élément d'entrée.
2. change : il s'exécutera lorsque la valeur sera modifiée.
3. none : la correction automatique ne s'exécutera pas.

Mettez à jour le fichier de modèle pour ajouter la directive autoCorrectOn au composant DateInput:

     < kendo-daterange > 

       < étiquette > 

         < span   class  =  " étiquette "  >  Début  </  span  ]> 

         < kendo-dateinput   kendoDateRangeStartInput  [(value)] =  " range.start "   autoCorrectOn  =  "






 Le meilleur outil 2023 pour ta croissance Instagram ! 



  




   


Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)