Dévoilement des améliorations de l’interface utilisateur Kendo pour les entrées de date angulaires

Découvrez les nouveautés des composants de saisie de date : vos utilisateurs finaux vous remercieront !

Êtes-vous prêt à dynamiser vos applications et à offrir à vos utilisateurs une expérience améliorée de saisie de dates ? Si la réponse est oui, vous avez de la chance !

Avec la dernière version, le DateEntrée, Sélecteur de date, DateHeurePicker et Sélecteur de temps du Progrès Interface utilisateur Kendo pour angulaire ont reçu un nouvel ensemble d’améliorations qui s’intègrent très bien les unes aux autres. Et je vous promets qu’ils vous faciliteront la vie !

Explorons-les ensemble et voyons comment vous pourriez en bénéficier.

Copier et coller améliorés entre les entrées de date

L’une des améliorations les plus recherchées est enfin disponible ! Dès la sortie de la boîte, copier et coller des dates entre les champs de saisie de date est devenu un jeu d’enfant. Vous obtiendrez sans aucun doute une expérience utilisateur plus fluide et, mieux encore, vous gagnerez du temps.

Comportement de la tabulation automatique

Basculer entre les segments de date (par exemple, jour, mois, année, heures, etc.) est devenu plus confortable avec le nouveau autoSwitchParts option. Il appartient désormais au développeur de décider si le focus doit se déplacer automatiquement d’un segment à un autre dans l’interface utilisateur de Kendo pour Angular. DateEntrée en tapant.

import { Component } from '@angular/core'; 

@Component({
selector: 'my-app', 
template: ` 
<div> 
<p>Select a date:</p> 
<kendo-dateinput 
   [autoSwitchParts]="false" 
   [value]="value">
     </kendo-dateinput> 
</div> `
export class AppComponent { 
public value: Date = new Date(2000, 2, 10); 
}

Touches de commutation automatique personnalisables

Non seulement les entrées de date vous permettent de définir le comportement de tabulation automatique, mais vous pouvez également définir quelles touches, lorsqu’elles sont enfoncées, passeront automatiquement au segment suivant. Fournir une collection personnalisée à autoSwitchKeys et bénéficiez d’un meilleur contrôle sur l’interaction de la saisie de la date. Vous pouvez définir n’importe quelle touche du clavier pour déclencher la commutation, par exemple : |, &, ;. Le ciel est votre limite !

Améliorez l’exemple de comportement de tabulation automatique ci-dessus en définissant vos propres touches de commutation :

<kendo-dateinput
        [autoSwitchKeys]="autoSwitchKeys"
        ...
 ></kendo-dateinput>
…
public autoSwitchKeys = ["-", ";", "+"];

Désactiver les modifications de la molette de la souris

Nous savons tous à quel point la molette de la souris peut être sensible : vous ne le remarquerez peut-être même pas ! Dans certains cas, vous souhaiterez peut-être empêcher les utilisateurs de modifier les valeurs de date à l’aide de la molette de la souris. Fini les changements de date accidentels qui pourraient ruiner l’exactitude des données. Cette option simple mais efficace vient à la rescousse :enableMouseWheel!

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <div>
      <p>Select a date:</p>
      <kendo-dateinput
        [enableMouseWheel]="false"
        [value]="value"
      ></kendo-dateinput>
    </div>
  `,
  })
export class AppComponent {
  public value: Date = new Date(2000, 2, 10);
}

Mode curseur

La fonctionnalité du mode curseur offre une expérience alternative de saisie de données en rendant visible la position du curseur. Réglage du allowCaretMode L’option sur true affichera un curseur clignotant à l’intérieur du DateInput, soit lorsqu’un segment de date est partiellement terminé, soit lorsqu’ autoSwitchParts c’est faux.

Remplissage automatique

Véritable révolutionnaire dans l’édition de date, le autofill L’option, lorsqu’elle est activée, remplira automatiquement les sections manquantes d’une date lorsque le composant perd le focus.

Par exemple, si un utilisateur saisit uniquement la partie jour, mois ou année de la date, puis clique en dehors du champ de saisie, le composant complétera automatiquement les parties manquantes à la date actuelle.

Cette amélioration promet d’accélérer considérablement la saisie des données et de faire gagner beaucoup de temps à vos utilisateurs !

En fin de compte, la toute nouvelle interface utilisateur Kendo pour Angular Entrée de date les améliorations font passer l’édition de date à un niveau supérieur et ouvrent la voie à une utilisation plus pratique. Pour voir ces fonctionnalités en action, consultez la dernière version du @progress/kendo-angular-dateinputs bibliothèque et intégrez ces fonctionnalités immédiatement dans vos applications. Vous me remercierez pour cela plus tard !

Bonne saisie de date !

Essayez Kendo UI pour Angular

N’oubliez pas que vous pouvez essayer gratuitement les entrées de date ainsi que 110 autres composants angulaires entièrement natifs pendant 30 jours !

Essayez Kendo UI pour Angular