Partager via

DatePicker

  • Article

Le DatePicker de l’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) appelle le contrôle de sélecteur de dates de la plateforme et vous permet de sélectionner une date.

DatePicker définit huit propriétés :

  • MinimumDate de type DateTime, dont la valeur par défaut est le premier jour de l’année 1900.
  • MaximumDate de type DateTime, dont la valeur par défaut est le dernier jour de l’année 2100.
  • Date de type DateTime, la date sélectionnée, dont la valeur par défaut est DateTime.Today.
  • Format de type string, une chaîne de mise en forme .NET standard ou personnalisée, dont la valeur par défaut est « D », le modèle de date longue.
  • TextColor de type Color, la couleur utilisée pour afficher la date sélectionnée.
  • FontAttributes de type FontAttributes, dont la valeur par défaut est FontAtributes.None.
  • FontFamily de type string, dont la valeur par défaut est null.
  • FontSize de type double, dont la valeur par défaut est -1.0.
  • CharacterSpacing, de type double, est l’espacement entre les caractères du texte DatePicker.

Les huit propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être mises en forme et que les propriétés peuvent être des cibles de liaisons de données. La propriété Date a un mode de liaison par défaut de BindingMode.TwoWay, ce qui signifie qu’elle peut être la cible d’une liaison de données dans une application qui utilise le modèle-vue-vue modèle (MVVM).

Avertissement

Lorsque vous définissez MinimumDate et MaximumDate, vérifiez que MinimumDate est toujours inférieure ou égale à MaximumDate. Sinon, DatePicker lève une exception.

Le DatePicker vérifie que la valeur de Date est comprise entre MinimumDate et MaximumDate inclusive. Si MinimumDate ou MaximumDate est définie pour que Date ne soit pas comprise entre elles, DatePicker ajuste la valeur de Date.

Le DatePicker déclenche un événement DateSelected lorsque l’utilisateur sélectionne une date.

Créer un DatePicker

Lorsqu’une valeur DateTime est spécifiée en XAML, l’analyseur XAML utilise la méthode DateTime.Parse avec un argument CultureInfo.InvariantCulture pour convertir la chaîne en valeur DateTime. Les dates doivent être spécifiées dans un format précis : mois à deux chiffres, jours à deux chiffres et années à quatre chiffres séparées par des barres obliques :

<DatePicker MinimumDate="01/01/2022"
            MaximumDate="12/31/2022"
            Date="06/21/2022" />

Si la propriété BindingContext de DatePicker est définie sur l’instance d’un viewmodel contenant des propriétés de type DateTime nommées MinDate, MaxDate et SelectedDate (par exemple), vous pouvez instancier le DatePicker de la manière suivante :

<DatePicker MinimumDate="{Binding MinDate}"
            MaximumDate="{Binding MaxDate}"
            Date="{Binding SelectedDate}" />

Dans cet exemple, les trois propriétés sont initialisées sur les propriétés correspondantes dans le viewmodel. Étant donné que la propriété Date a un mode de liaison TwoWay, toute nouvelle date sélectionnée par l’utilisateur est automatiquement reflétée dans le viewmodel.

Si le DatePicker ne contient pas de liaison sur sa pro Date, votre application doit attacher un gestionnaire à l’événement DateSelected pour être informée de la sélection d’une nouvelle date par l’utilisateur.

Dans le code, vous pouvez initialiser les propriétés MinimumDate, MaximumDate et Date aux valeurs de type DateTime :

DatePicker datePicker = new DatePicker
{
    MinimumDate = new DateTime(2018, 1, 1),
    MaximumDate = new DateTime(2018, 12, 31),
    Date = new DateTime(2018, 6, 21)
};

Pour obtenir plus d’informations sur la définition des propriétés de police, consultez les Polices.

DatePicker et disposition

Il est possible d’utiliser une option de disposition horizontale non contrainte telle que Center, Start ou End avec DatePicker :

<DatePicker ···
            HorizontalOptions="Center" />

Toutefois, ce n’est pas recommandé. Selon le paramètre de la propriété Format, il est possible que les dates sélectionnées nécessitent différentes largeurs d’affichage. Par exemple, la chaîne de format « D » entraîne l’affichage par DateTime de dates en format long et « Mercredi 12 septembre 2018 » nécessite une largeur d’affichage supérieure à « Vendredi 4 mai 2018 ». Selon la plateforme, cette différence peut entraîner la modification d’affichage de la largeur de DateTime dans la disposition ou une troncation de l’affichage.

Conseil

Il est préférable d’utiliser le paramètre par défaut HorizontalOptions de Fill avec DatePicker et de ne pas utiliser une largeur de Auto lors du placement de DatePicker dans une cellule Grid.

Localiser un DatePicker sur Windows

Pour les applications ciblant Windows, le fait de vérifier que le DatePicker affiche des dates dans un format localisé aux paramètres de l’utilisateur, notamment les noms de mois et de jours dans la boîte de dialogue du sélecteur, nécessite une configuration spécifique dans le fichier Package.appxmanifest de votre projet. La localisation des éléments dans le manifeste du package améliore l’expérience utilisateur en respectant les normes culturelles des paramètres régionaux de l’utilisateur.

La localisation des formats de dates et de chaînes dans le <xref:Microsoft.Maui.Controls.DatePicker> nécessite la déclaration des langues prises en charge dans votre fichier Package.appxmanifest.

Procédez comme suit pour configurer votre DatePicker pour la localisation sur Windows :

  1. Localisez la section Ressources.

    Accédez au dossier Platforms\Windows de votre projet et ouvrez le fichier Package.appxmanifest dans un éditeur de code ou Visual Studio. Si vous utilisez Visual Studio, vérifiez que vous affichez le code XML brut du fichier. Recherchez la section <Resources>, qui peut inclure initialement :

    <Resources>
    <Resource Language="x-generate" />
</Resources>

  2. Spécifiez les langues prises en charge.

    Remplacez <Resource Language="x-generate"> par les éléments <Resource /> pour chacune de vos langues prises en charge. Le code de langue doit être sous la forme d’une balise de langue BCP-47, par exemple en-US pour l’anglais (États-Unis), es-ES pour l’espagnol (Espagne), fr-FR pour le français (France) ou de-DE pour l’allemand (Allemagne). Par exemple, pour ajouter la prise en charge de l’anglais (États-Unis) et de l’espagnol (Espagne), votre section <Resources> doit être modifiée pour ressembler à ceci :

    <Resources>
    <Resource Language="en-US" />
    <Resource Language="es-ES" />
</Resources>

Cette configuration veille à ce que DatePicker affiche les formats de date, les mois et les jours en fonction des paramètres régionaux de l’utilisateur, ce qui améliore considérablement la facilité d’utilisation et l’accessibilité de l’application dans différentes régions.

Si vous souhaitez obtenir plus d’informations sur la localisation dans des applications .NET MAUI, consultez Localisation.