Finition de notre application à faire avec le TimePicker de Kendo UI

À ce stade de la série Kendo UI et Angular Unite, notre application pour tâches à faire est superbe à l'aide de composants Kendo UI et d'animations angulaires personnalisées. Cependant, chaque tâche à effectuer pourrait bénéficier d’un temps imparti. Voyons comment nous pouvons facilement accomplir cela avec le TimePicker de Kendo UI!

Bonjour! Bienvenue dans Angular et Kendo UI Unite! Je suis Alyssa Nicoll, défenseur du développement angulaire de Kendo UI de Progress. Si vous êtes nouveau dans cette série, je vous suggère fortement de commencer par le premier post ici ou par la série de vidéos sur lesquelles ils s'appuient ! Dans cet article, nous allons en fait ajouter un TimePicker à notre liste de tâches, afin que vous puissiez non seulement ajouter des todos, mais également leur attribuer un temps supplémentaire.

ainsi que le code trouvé ici.

Pour commencer, nous allons ouvrir notre terminal et installer les entrées de date angulaires Kendo.

Installer les entrées de date Kendo UI

 ng add @ progress / kendo-angular-dateinputs

L'installation de ces entrées se poursuivra et nous donnera accès à toutes les entrées de date que nous voudrions utiliser à partir de Kendo UI. Cependant, aujourd'hui, nous n'utiliserons que TimePicker. Nous en avons terminé avec la fenêtre du terminal et nous pouvons le fermer.

À l'intérieur de notre modèle, dans le bouton, à côté de l'élément, le titre de l'élément à modifier, que nous souhaitons ajouter à un Kendo TimePicker. Et nous voulons lier la valeur de nos todos.

Ajouter un repère au modèle

Nous allons définir la valeur sur todo.due qu'il nous reste à créer.

Maintenant , si nous entrons dans notre composant, nous voyons que nos todos n’ont pas encore due . Il est maintenant temps de résoudre ce problème! Nous devons attribuer un délai à chaque élément: : échéance: nouvelle date (2019, 3, 10, 2, 30, 0) .

Nous allons simplement modifier légèrement l'heure de chaque élément, en modifiant les valeurs à l'intérieur de Date () .

Mise à jour de todos Array avec due

   todos = [
    {
      article: 'Emmenez votre chien chez le vétérinaire',
      due: nouvelle date (2019, 3, 10, 2, 30, 0)
    },
    {
      point: 'Obtenir une vidange d'huile',
      due: nouvelle date (2019, 3, 10, 2, 30, 0)
    },
    {
      article: 'Finir le puzzle super dur',
      due: nouvelle date (2019, 3, 10, 2, 30, 0)
    },
    {
      article: 'Pack for Denver',
      due: nouvelle date (2019, 3, 10, 3, 30, 0)
    },
    {
      élément: "Créer une application",
      due: nouvelle date (2019, 3, 10, 1, 30, 0)
    }

Ainsi, chacun des éléments a maintenant un "dû" qui est réglé sur une nouvelle date. Maintenant, si nous sauvegardons ceci et passons au CSS, nous verrons que c'est là que justification-contenu: espace-entre est pratique.

Sans justification-contenu: espace entre

avec justification-contenu: espace-entre

Cette fois, nous voyons nos articles plus ici sur le côté gauche, puis le TimePicker là-bas sur le côté droit. En fait, j'ai créé des styles personnalisés pour que notre TimePicker ait un aspect un peu meilleur sur nos tâches, étant donné que notre appli todo a cet aspect et cette convivialité.

Donc, si vous faites défiler l'écran jusqu'au bas de la page Dans le fichier todo.component.scss, vous verrez ces styles de personnalisation de TimePicker – il s’agit principalement de me débarrasser de l’arrière-plan.

Personnalisez les styles de notre timepicker (après avoir montré à quoi ressemblent les styles par défaut)

 / / sélecteur de temps personnalisation des styles

.kendo-timepicker {
  hauteur: 30px;
}
.k-timepicker: survolez,
.k-timepicker: survolez .k-select,
.k-timepicker .k-picker-wrap,
.k-dateinput .k-dateinput-wrap,
.k-timepicker .k-select {
  fond: aucun;
  bordure: aucune;
}
.k-timepicker: survolez .k-select {
  image de fond: aucune;
}
.k-dateinput-wrap .k-input,
.k-timepicker .k-select {
  Couleur blanche;
}
Entrée .k-dateinput-wrap: focus, .k-timepicker .k-state-driven {
  boîte-ombre: aucune;
}
.k-dateinput-wrap input :: selection {
  couleur de fond: transparent;
}

Je vais maintenant les commenter, revenir en arrière et actualiser les informations, vous verrez que le résultat est légèrement meilleur à chaque fois.

Yay! Nous avons donc notre TimePicker, super simple, super facile, et maintenant, il est lié à une propriété convenable. La prochaine étape consistera en fait à ajouter un élément dans.

Lorsque nous ajoutons un nouvel élément, il ne sera pas initialement prévu.

La première chose que nous allons faire est de revenir à notre composant, et en haut de la liste, en haut de la classe, nous allons créer une première temps voulu, ou initDueTime . Nous faisons ce type de type date et je le mets égal à une nouvelle date et heure.

 public initDueTime: Date = new Date (2019, 3, 10, 10, 30, 0);

Ensuite, nous allons utiliser ce temps initial initial pour créer ou ajouter une nouvelle tâche à la liste.

Créer initDueTime et utiliser lors de la création de nouvelles tâches

 public initDueTime: Date = nouvelle date (2019, 3, 10, 10, 30, 0);
...
this.todos = [{item: input.value, due: this.initDueTime}, ... this.todos];

En plus de notre valeur d'entrée d'élément, nous souhaitons créer une clé due et nous allons la fixer à this.initDueTime .

Maintenant, lorsque nous allons créer un nouvel élément, il devrait avoir le temps initial. À chaque fois. Perfect!

C'était un moyen très simple et facile d'ajouter quelque chose comme un délai sur notre liste de tâches. J'aime absolument ce sélecteur, je le trouve super mignon et j'aime aussi le fait qu'il soit si personnalisable, comme vous l'avez vu avec les lignes de CSS que j'ai écrites précédemment pour le personnaliser. Je modifiais littéralement, principalement, encore une fois, l’arrière-plan, la bordure, l’image d’arrière-plan et la couleur, afin que cela corresponde à ce que nous avons ici dans notre interface utilisateur. Plus important encore, j'aime le fait qu'aucune balise importante n'était nécessaire dans la création de cette TimePicker personnalisée pour Kendo UI!

J'espère que vous aurez du plaisir à utiliser davantage de données de date et j'espère que TimePicker sera vraiment utile. Heureux de coder tout le monde!

Si vous êtes nouveau dans Kendo UI pour Angular, vous pouvez en apprendre davantage ici ou simplement vous lancer dans un essai gratuit aujourd'hui.