Sélecteur de dates du calendrier

  • Article

Le sélecteur de dates de calendrier est un contrôle déroulant optimisé pour la sélection d’une seule date dans un affichage calendrier, dans lequel les informations contextuelles comme le jour de la semaine ou l’exhaustivité du calendrier sont importantes. Vous pouvez modifier le calendrier pour fournir du contexte supplémentaire ou pour limiter les dates disponibles.

Est-ce le contrôle approprié ?

Utilisez un sélecteur de dates du calendrier pour permettre à un utilisateur de choisir une date unique à partir d’un affichage Calendrier contextuel. Utilisez-le pour des éléments tels que le choix d’une date de rendez-vous ou de départ.

Pour permettre à un utilisateur de choisir une date connue, par exemple, une date de naissance, où le contexte du calendrier n’est pas important, pensez à utiliser un sélecteur de dates.

Pour plus d’informations sur le choix du contrôle approprié, voir l’article Contrôles de date et d’heure.

Exemples

Le point d’entrée affiche le texte de l’espace réservé si aucune date n’a été définie. Sinon, il affiche la date choisie. Lorsque l’utilisateur sélectionne le point d’entrée, un affichage de calendrier est développé pour que l’utilisateur sélectionne une date. Cet affichage de calendrier se superpose aux autres éléments de l’interface utilisateur ; il ne les ferme pas.

Capture d’écran d’un sélecteur de dates de calendrier montrant une zone de sélection de date vide, puis une zone renseignée avec un calendrier sous celle-ci.

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d'application Windows et WinUI 3, mais qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.

Les API de ce contrôle existent dans l’espace de noms Windows.UI.Xaml.Controls .

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et modèles les plus récents pour tous les contrôles. WinUI 2.2 ou version ultérieure inclut un nouveau modèle pour ce contrôle qui utilise des coins arrondis. Pour plus d’informations, consultez Rayons des angles.

Créer un sélecteur de dates de calendrier

Ouvrez l’application Galerie WinUI 3 et voyez le CalendarDatePicker en action.

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Calendar"/>

CalendarDatePicker arrivalCalendarDatePicker = new CalendarDatePicker();
arrivalCalendarDatePicker.Header = "Calendar";

Le sélecteur de dates du calendrier qui en résulte se présente comme suit :

Capture d’écran d’un sélecteur de dates de calendrier rempli avec une étiquette indiquant Calendrier.

Le sélecteur de dates du calendrier possède un CalendarView interne pour la sélection de dates. Un sous-ensemble des propriétés CalendarView, comme IsTodayHighlighted et FirstDayOfWeek, existe sur CalendarDatePicker et est transmis au CalendarView interne pour vous permettre de le modifier.

Toutefois, vous ne pouvez pas modifier le SelectionMode du CalendarView interne pour autoriser la sélection multiple. Si vous avez besoin de permettre à un utilisateur de sélectionner plusieurs dates ou que vous avez besoin que le calendrier soit toujours visible, envisagez d’utiliser un affichage Calendrier plutôt qu’un sélecteur de dates du calendrier. Voir l’article Affichage Calendrier pour plus d’informations sur la manière dont vous pouvez modifier l’affichage du calendrier.

Sélection de dates

Utilisez la propriété Date pour obtenir ou définir la date sélectionnée. Par défaut, la propriété Date est null. Lorsqu’un utilisateur sélectionne une date dans l’affichage Calendrier, cette propriété est mise à jour. Un utilisateur peut effacer la date en cliquant sur la date sélectionnée dans l’affichage Calendrier pour la désélectionner.

Vous pouvez définir la date dans votre code comme suit.

myCalendarDatePicker.Date = new DateTime(1977, 1, 5);

Lorsque vous définissez la date dans le code, la valeur est limitée par les propriétés MinDate et MaxDate.

  • Si la valeur Date est inférieure à MinDate, la valeur est définie sur MinDate.
  • Si la valeur Date est supérieure à MaxDate, la valeur est définie sur MaxDate.

Vous pouvez gérer l’événement DateChanged pour être averti lorsque la valeur Date a changé.

Notes

Pour obtenir des informations importantes sur les valeurs de date, consultez Valeurs DateTime et Calendar dans l’article Contrôles de date et d’heure.

Définition d’un texte d’en-tête et d’espace réservé

Vous pouvez ajouter un contrôle Header (ou étiquette) et un contrôle PlaceholderText (ou filigrane) au sélecteur de date de calendrier pour indiquer à l’utilisateur son rôle. Si vous voulez personnaliser l’aspect de l’en-tête, vous pouvez définir la propriété HeaderTemplate au lieu de la propriété Header.

Le texte d’espace réservé par défaut est « sélectionner une date ». Vous pouvez le supprimer en définissant la propriété PlaceholderText sur une chaîne vide, ou vous pouvez fournir un texte personnalisé comme illustré ici.

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Arrival date"
                    PlaceholderText="Choose your arrival date"/>

Obtenir l’exemple de code