Xamarin.Forms Datepicker

Télécharger l’exemple

Vue Xamarin.Forms qui permet à l’utilisateur de sélectionner une date.

Appelle Xamarin.FormsDatePicker le contrôle sélecteur de dates de la plateforme et permet à l’utilisateur de sélectionner une date. DatePicker définit huit propriétés :

• MinimumDate de type DateTime, qui est défini par défaut sur le premier jour de l’année 1900.
• MaximumDate de type DateTime, qui est par défaut le dernier jour de l’année 2100.
• Date de type DateTime, la date sélectionnée, qui est définie par défaut sur la valeur DateTime.Today.
• Format de type string, 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, couleur utilisée pour afficher la date sélectionnée, qui est définie par défaut sur Color.Default.
• FontAttributes de type FontAttributes, qui a la valeur FontAtributes.Nonepar défaut .
• FontFamily de type string, qui a la valeur nullpar défaut .
• FontSize de type double, qui est défini par défaut sur -1.0.
• CharacterSpacing, de type double, est l’espacement entre les caractères du DatePicker texte.

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

Avertissement

Lorsque vous définissez MinimumDate et MaximumDate, assurez-vous que MinimumDate est toujours inférieur ou égal à MaximumDate. Sinon, DatePicker déclenche une exception.

En interne, le DatePicker garantit que Date se trouve entre MinimumDate et MaximumDate, inclus. Si MinimumDate ou MaximumDate est défini de façon à ce qu’il Date ne soit pas entre eux, DatePicker ajuste la valeur de Date.

Les huit propriétés sont toutes adossées à BindableProperty des objets, ce qui signifie qu’elles peuvent être stylées et que les propriétés peuvent être des cibles de liaisons de données. La Date propriété a un mode de liaison par défaut de BindingMode.TwoWay, ce qui signifie qu’elle peut être une cible d’une liaison de données dans une application qui utilise l’architecture Model-View-ViewModel (MVVM).

Initialisation des propriétés DateTime

Dans le code, vous pouvez initialiser les MinimumDatepropriétés , MaximumDateet Date sur des 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)
};

Lorsqu’une DateTime valeur est spécifiée en XAML, l’analyseur XAML utilise la DateTime.Parse méthode avec un CultureInfo.InvariantCulture argument 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és par des barres obliques :

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

Si la BindingContext propriété de DatePicker est définie sur un instance d’un viewmodel contenant des propriétés de type DateTime nommé MinDate, MaxDateet SelectedDate (par exemple), vous pouvez instancier le DatePicker comme suit :

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

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

Si le DatePicker ne contient pas de liaison sur sa Date propriété, une application doit attacher un gestionnaire à l’événement DateSelected pour être informée lorsque l’utilisateur sélectionne une nouvelle date.

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

DatePicker et disposition

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

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

Cela n’est cependant pas recommandé. Selon le paramètre de la Format propriété, les dates sélectionnées peuvent nécessiter des largeurs d’affichage différentes. Par exemple, la chaîne de format « D » entraîne DateTime l’affichage des dates dans un 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 de la largeur de la DateTime vue dans la disposition ou la troncation de l’affichage.

Conseil

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

DatePicker dans une application

L’exemple DaysBetweenDates inclut deux DatePicker vues sur sa page. Celles-ci peuvent être utilisées pour sélectionner deux dates, et le programme calcule le nombre de jours entre ces dates. Comme le programme ne modifie pas les paramètres des MinimumDate propriétés et MaximumDate , les deux dates doivent être comprises entre 1900 et 2100.

Voici le fichier XAML :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DaysBetweenDates"
             x:Class="DaysBetweenDates.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0, 20, 0, 0" />
        </OnPlatform>
    </ContentPage.Padding>

    <StackLayout Margin="10">
        <Label Text="Days Between Dates"
               Style="{DynamicResource TitleStyle}"
               Margin="0, 20"
               HorizontalTextAlignment="Center" />

        <Label Text="Start Date:" />

        <DatePicker x:Name="startDatePicker"
                    Format="D"
                    Margin="30, 0, 0, 30"
                    DateSelected="OnDateSelected" />

        <Label Text="End Date:" />

        <DatePicker x:Name="endDatePicker"
                    MinimumDate="{Binding Source={x:Reference startDatePicker},
                                          Path=Date}"
                    Format="D"
                    Margin="30, 0, 0, 30"
                    DateSelected="OnDateSelected" />

        <StackLayout Orientation="Horizontal"
                     Margin="0, 0, 0, 30">
            <Label Text="Include both days in total: "
                   VerticalOptions="Center" />
            <Switch x:Name="includeSwitch"
                    Toggled="OnSwitchToggled" />
        </StackLayout>

        <Label x:Name="resultLabel"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center" />

    </StackLayout>
</ContentPage>

Une propriété « D » est affectée à Format chacun DatePicker pour un format de date longue. Notez également que l’objet endDatePicker a une liaison qui cible sa MinimumDate propriété. La source de liaison est la propriété sélectionnée Date de l’objet startDatePicker . Cela garantit que la date de fin est toujours postérieure ou égale à la date de début. En plus des deux DatePicker objets, un Switch est intitulé « Inclure les deux jours au total ».

Les deux DatePicker vues ont des gestionnaires attachés à l’événement DateSelected , et le Switch a un gestionnaire attaché à son Toggled événement. Ces gestionnaires d’événements se trouvent dans le fichier code-behind et déclenchent un nouveau calcul des jours entre les deux dates :

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    void OnDateSelected(object sender, DateChangedEventArgs args)
    {
        Recalculate();
    }

    void OnSwitchToggled(object sender, ToggledEventArgs args)
    {
        Recalculate();
    }

    void Recalculate()
    {
        TimeSpan timeSpan = endDatePicker.Date - startDatePicker.Date +
            (includeSwitch.IsToggled ? TimeSpan.FromDays(1) : TimeSpan.Zero);

        resultLabel.Text = String.Format("{0} day{1} between dates",
                                            timeSpan.Days, timeSpan.Days == 1 ? "" : "s");
    }
}

Lors de la première exécution de l’exemple, les deux DatePicker affichages sont initialisés à la date du jour. La capture d’écran suivante montre le programme en cours d’exécution sur iOS et Android :

Appuyez sur l’un des DatePicker écrans pour appeler le sélecteur de dates de plateforme. Les plateformes implémentent ce sélecteur de dates de manière très différente, mais chaque approche est familière aux utilisateurs de cette plateforme :

Conseil

Sur Android, la DatePicker boîte de dialogue peut être personnalisée en remplaçant la CreateDatePickerDialog méthode dans un renderer personnalisé. Cela permet, par exemple, d’ajouter des boutons supplémentaires à la boîte de dialogue.

Une fois que deux dates sont sélectionnées, l’application affiche le nombre de jours entre ces dates :

Liens connexes

• Exemple DaysBetweenDates
• DatePicker API