Sélection de dates avec le calendrier Telerik pour Blazor

Le composant Calendrier de l'interface utilisateur Telerik pour Blazor offre à vos utilisateurs un moyen intuitif de sélectionner une seule date, mais il prend également en charge les conventions d'interface utilisateur standard permettant de sélectionner plusieurs dates. Voici comment gérer tous ces scénarios, y compris les moments où vous souhaitez exclure certaines dates.

Dans une colonne précédente j'ai montré comment ajouter l'interface utilisateur Telerik pour Blazor Calendrier composant à une page et aider l'utilisateur à naviguer d'un mois à l'autre. Mais je n’ai pas passé beaucoup de temps à décrire comment saisir la date choisie par l’utilisateur. Voilà le but de cet article: les options permettant à l'utilisateur de sélectionner une seule date et plusieurs dates

Mises en garde sur les versions: pour cette colonne, j'utilise l'interface utilisateur de Telerik pour Blazor 1.4.1, Visual Studio 2019 (version 16.3) et ASP.NET Core v3.0.0-preview7. J'ai dû installer le package NuGet pour Microsoft.CodeAnalysis (et mettre à jour certains packages connexes) avant de pouvoir installer le package NuGet contenant l'interface utilisateur Telerik pour Blazor. J'ai également dû effectuer une mise à niveau vers la dernière version du fichier JavaScript prenant en charge ses composants:

Récupération d'une date unique

Le composant Calendar propose trois méthodes pour récupérer une date unique. Si vous n’avez pas besoin de travailler immédiatement avec la date, la solution la plus simple consiste simplement à associer la valeur du calendrier à une propriété ou à un champ de votre application à l’aide de l’attribut @ bind-Value . La liaison de l'élément à un champ peut ressembler à ceci:

 @code {
  dateTime privée startDate;
  // ...
}

Avec cette solution, chaque fois que l'utilisateur sélectionne une date, le champ startDate est automatiquement mis à jour avec la date sélectionnée par l'utilisateur.

Bien qu'il n'y ait rien de mal à utiliser un champ, le code est réécrit de la manière suivante: une propriété entièrement implémentée et l'insertion de code dans le configurateur de la propriété vous permettent de prendre des mesures lorsque l'utilisateur sélectionne une date. Remplacer ce champ par une propriété entièrement mise en œuvre, startDate me permet de mettre la date sélectionnée à un endroit sûr (dans le code suivant, je stocke simplement la valeur dans un champ de sauvegarde).

Voici le code qui me permet Accrochez-vous à la dernière valeur sélectionnée par l'utilisateur, peu importe ce qu'il se passe dans l'interface utilisateur de mon composant (remarquez que je n'ai pas à réécrire l'attribut @ bind-Value sur l'élément pour utiliser ce code, car le calendrier n'a pas d'importance si je lie un champ ou une propriété):

 private DateTime _startDate;
DateTime privée startDate
{
  get {return _startDate; }
  set {_startDate = value; }
} 

Une autre option permettant d’exécuter du code dès que l’utilisateur sélectionne une date consiste à lier votre propre méthode à l’événement ValueChanged () de l’agenda. La méthode liée à l'événement recevra un objet DateTime représentant la date sélectionnée par l'utilisateur chaque fois que l'utilisateur clique sur une date.

Voici le code qui le fait (et ne fait que masquer la date dans un champ ):

 @code {
  private DateTime _startDate;
  Void privé getDate (DateTime startDate)
  {
    _startDate = startDate;
  }
} 

Ces deux options s’excluent mutuellement: vous ne pouvez pas utiliser les deux éléments @ bind-Value et de ValueChanged () sur le même élément .

Votre troisième L’option consiste à lier le calendrier dans son ensemble à un champ de votre composant. Ensuite, quelle que soit la méthode de votre composant, il vous suffit de vérifier la propriété Value de l’agenda pour récupérer la date sélectionnée par l’utilisateur. Ce code, par exemple, saisit la date de l’utilisateur dans une méthode liée à l’événement onclick () d’un bouton :

   Update

 @code {
  Calendrier TelerikCalendar;
  void public sendData ()
  {
    _startDate = calendar.Value;
    // effectue d'autres actions ...
  }
} 

Cette option peut être combinée avec les attributs @ bind-Value ou ValueChanged .

Récupération de dates multiples

Il arrive que vous souhaitiez laisser le utilisateur sélectionner plusieurs dates. Un scénario typique est lorsque l'utilisateur doit spécifier une plage de dates en spécifiant une date de début et une date de fin. Cependant, il existe également des scénarios dans lesquels vous souhaitez que l'utilisateur sélectionne plusieurs dates aléatoires ("Veuillez indiquer les dates auxquelles une personne à la maison acceptera la livraison").

Le composant Calendrier Calendrier prend en charge les deux scénarios - vous activez simplement la sélection de plusieurs dates pour le calendrier en définissant son attribut SelectionMode sur CalendarSelectionMode.Multiple :

Il existe cependant une astuce d'interface utilisateur: comme pour les listes déroulantes ou les listes de sélection, l'utilisateur doit appuyer sur la touche Ctrl (pour sélectionner plusieurs dates) ou sur la touche de sélection . touche (pour sélectionner une plage de dates) lors de la sélection d’une date.

Si vous utilisez l’attribut ValueChanged de l’agenda pour lier une méthode, celle-ci sera appelée chaque fois que l’utilisateur sélectionne une date et le La méthode sera transmise à la date à laquelle l'utilisateur a cliqué. Si vous utilisez l'attribut @ bind-Value votre propriété ou champ sera également défini sur la date à laquelle l'utilisateur a cliqué chaque fois qu'il sélectionne une date. Vous pouvez utiliser ces deux options pour valider les dates au fur et à mesure que l'utilisateur les sélectionne.

Lorsqu'il s'agit d'extraire toutes les dates sélectionnées, la solution la plus simple consiste à ajouter une référence au composant d'agenda et à accéder à toutes les dates sélectionnées à l'aide de la touche. SelectedDates propriété:

   Mise à jour

 @code {
  Calendrier TelerikCalendar;
  void privé sendData ()
  {
    foreach (DateTime dt dans calendar.SelectedDates)
    {
      // travaille avec chacune des dates sélectionnées ...
    }
  }
} 

Si l'utilisateur a appuyé sur la touche Ctrl tout en sélectionnant des dates, la collection SelectedDates contiendra toutes les dates sur lesquelles l'utilisateur a cliqué. Si l'utilisateur a appuyé sur la touche Shift tout en sélectionnant des dates, la collection SelectedDates conservera toutes les dates comprises entre les deux dates sélectionnées.

Utilisation de dates et de plages de dates désactivées

Sachez toutefois que si vous utilisez également la propriété DisabledDates et que l'utilisateur utilise la touche Shift pour sélectionner une plage de dates, un traitement spécial est nécessaire. 19659009] La propriété DisabledDates vous permet de spécifier une collection de dates que l'utilisateur n'est pas autorisé à sélectionner. Voici une implémentation naïve qui ajoute les week-ends de juillet 2019 à une collection:

 private List  week-end = new List  () {
  nouveau DateTime (2019, 7, 6),
  nouveau DateTime (2019, 7, 7),
  / * autres dates de week-end * /

La collection des weekends peut ensuite être liée à un élément à l'aide de l'attribut DisabledDates pour empêcher l'utilisateur de cliquer sur les dates de week-end:

Toutefois, lorsque l'utilisateur utilise la touche Shift pour sélectionner une plage de dates, il ne peut même jamais essayer de cliquer sur l'une des dates désactivées. Un utilisateur peut, par exemple, cliquer sur le vendredi avant le week-end (5 juillet) et le lundi suivant (8 juillet). L’interface utilisateur de l’agenda fera son effet, en mettant en valeur l’ensemble de la plage (du 5 au 8 inclus), tout en utilisant une couleur plus terne pour les dates désactivées. La collection SelectedDates inclura toutefois toutes les dates de la plage, y compris les dates désactivées (à savoir les 5, 6, 7 et 8 juillet).

Heureusement, il est facile de supprimer des dates désactivées: appliquez la méthode Exceptée () à la propriété SelectedDates en passant la collection de dates handicapées (la collection des weekends dans mon cas). La méthode Exceptée () renverra une nouvelle collection composée des dates de SelectedDates qui ne figurent pas dans la collection de dates invalides. Si vous souhaitez plutôt obtenir une liste des dates désactivées dans SelectedDates - pour indiquer à l'utilisateur quelles dates de la plage n'ont pas été sélectionnées vous utiliserez le . ] Méthode Intersect () au lieu de la méthode Except () (bien que, comme je l'ai dit, l'interface utilisateur affiche très bien le signalement des dates d'invalidité).

Réviser mon sendData () méthode pour supprimer automatiquement les dates désactivées me donne ceci:

 public void sendData ()
{
  var validDates = calendar.SelectedDates.Except (week-end);
  foreach (DateTime dt in validDates)
  {
    // ...
  }
}

Vous pouvez maintenant donner à vos utilisateurs la possibilité de sélectionner la date (ou les dates) de leur choix tout en les empêchant de choisir la ou les dates que vous ne souhaitez pas qu'ils utilisent.

Pour en savoir plus sur ces Telerik Interface utilisateur pour les composants Blazor et ce qu’ils peuvent faire, consultez cette page de démonstration de Blazor ou téléchargez un essai pour commencer immédiatement à se développer!