Xamarin.Forms Datepicker

Das Beispiel herunterladen

Eine Xamarin.Forms Ansicht, die es dem Benutzer ermöglicht, ein Datum auszuwählen.

Ruft Xamarin.FormsDatePicker das Datumsauswahl-Steuerelement der Plattform auf und ermöglicht es dem Benutzer, ein Datum auszuwählen. DatePicker definiert acht Eigenschaften:

• MinimumDate vom Typ DateTime, der standardmäßig auf den ersten Tag des Jahres 1900 festgelegt ist.
• MaximumDate vom Typ DateTime, der standardmäßig auf den letzten Tag des Jahres 2100 festgelegt ist.
• Date vom Typ DateTime, das ausgewählte Datum, das standardmäßig auf den Wert DateTime.Todayfestgelegt ist.
• Format vom Typ string, eine standardmäßige oder benutzerdefinierte .NET-Formatierungszeichenfolge, die standardmäßig auf "D" (langes Datumsmuster) festgelegt ist.
• TextColor vom Typ Color, die Farbe, die verwendet wird, um das ausgewählte Datum anzuzeigen, die standardmäßig auf Color.Defaultlautet.
• FontAttributes vom Typ FontAttributes, der standardmäßig auf lautet FontAtributes.None.
• FontFamily vom Typ string, der standardmäßig auf lautet null.
• FontSize vom Typ double, der standardmäßig auf -1.0 festgelegt ist.
• CharacterSpacing vom Typ double: Abstand zwischen den Zeichen des DatePicker-Texts.

Der DatePicker löst ein Ereignis aus DateSelected , wenn der Benutzer ein Datum auswählt.

Warnung

Stellen Sie beim Festlegen MinimumDate von und MaximumDatesicher, dass MinimumDate immer kleiner oder gleich MaximumDateist. DatePicker Andernfalls löst eine Ausnahme aus.

Intern stellt sicher DatePicker , dass Date zwischen MinimumDate und MaximumDateinklusive ist. Wenn MinimumDate oder MaximumDate so festgelegt ist, dass Date sich nicht zwischen ihnen befindet, DatePicker passt der Wert von an Date.

Alle acht Eigenschaften werden durch BindableProperty Objekte unterstützt, was bedeutet, dass sie formatiert werden können, und die Eigenschaften können Ziele von Datenbindungen sein. Die Date Eigenschaft verfügt über den Standardbindungsmodus von BindingMode.TwoWay, was bedeutet, dass sie ein Ziel einer Datenbindung in einer Anwendung sein kann, die die MVVM-Architektur (Model-View-ViewModel) verwendet.

Initialisieren der DateTime-Eigenschaften

Im Code können Sie die MinimumDateEigenschaften , MaximumDateund Date mit Werten vom Typ DateTimeinitialisieren:

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

Wenn ein DateTime Wert in XAML angegeben wird, verwendet der XAML-Parser die DateTime.Parse -Methode mit einem CultureInfo.InvariantCulture Argument, um die Zeichenfolge in einen DateTime Wert zu konvertieren. Die Datumsangaben müssen in einem präzisen Format angegeben werden: zweistellige Monate, zweistellige Tage und vierstellige Jahre getrennt durch Schrägstriche:

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

Wenn die BindingContext -Eigenschaft von DatePicker auf eine instance eines Viewmodels festgelegt ist, das Eigenschaften des Typs DateTimeMinDate, MaxDateund SelectedDate enthält (z. B.), können Sie dies DatePicker wie folgt instanziieren:

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

In diesem Beispiel werden alle drei Eigenschaften für die entsprechenden Eigenschaften im Viewmodel initialisiert. Da die Date -Eigenschaft den Bindungsmodus aufweist TwoWay, wird jedes neue Datum, das der Benutzer auswählt, automatisch im viewmodel widerspiegelt.

Wenn die DatePicker keine Bindung für die Date -Eigenschaft enthält, sollte eine Anwendung einen Handler an das DateSelected Ereignis anfügen, um informiert zu werden, wenn der Benutzer ein neues Datum auswählt.

Informationen zum Festlegen von Schriftarteigenschaften finden Sie unter Schriftarten.

DatePicker und Layout

Es ist möglich, eine nicht eingeschränkte horizontale Layoutoption wie Center, Startoder End mit DatePickerzu verwenden:

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

Dies ist wird jedoch nicht empfohlen. Abhängig von der Einstellung der Format Eigenschaft erfordern ausgewählte Datumsangaben möglicherweise unterschiedliche Anzeigebreiten. Die Formatzeichenfolge "D" bewirkt DateTime beispielsweise, dass Datumsangaben in einem langen Format angezeigt werden, und "Mittwoch, 12. September 2018" erfordert eine größere Anzeigebreite als "Freitag, 4. Mai 2018". Je nach Plattform kann dieser Unterschied dazu führen, dass sich die Breite der DateTime Ansicht im Layout ändert oder dass die Anzeige abgeschnitten wird.

Tipp

Es empfiehlt sich, die Standardeinstellung HorizontalOptions mit FillDatePickerzu verwenden und beim Einfügen DatePicker in eine Grid Zelle nicht die Breite von Auto zu verwenden.

DatePicker in einer Anwendung

Das DaysBetweenDates-Beispiel enthält zwei DatePicker Ansichten auf seiner Seite. Diese können verwendet werden, um zwei Datumsangaben auszuwählen, und das Programm berechnet die Anzahl der Tage zwischen diesen Datumsangaben. Das Programm ändert die Einstellungen der MinimumDate Eigenschaften und MaximumDate nicht, sodass die beiden Datumsangaben zwischen 1900 und 2100 liegen müssen.

Dies ist die XAML-Datei:

<?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>

Jedem DatePicker wird die Format Eigenschaft "D" für ein langes Datumsformat zugewiesen. Beachten Sie auch, dass das endDatePicker Objekt über eine Bindung verfügt, die auf seine MinimumDate Eigenschaft abzielt. Die Bindungsquelle ist die ausgewählte Date Eigenschaft des startDatePicker -Objekts. Dadurch wird sichergestellt, dass das Enddatum immer höher als oder gleich dem Startdatum liegt. Zusätzlich zu den beiden DatePicker Objekten ist ein Switch mit "Beide Tage insgesamt einschließen" beschriftet.

Die beiden DatePicker Ansichten verfügen über Handler, die an das DateSelected Ereignis angefügt sind, und das verfügt über einen Handler, der Switch an das Toggled Ereignis angefügt ist. Diese Ereignishandler befinden sich in der CodeBehind-Datei und lösen eine neue Berechnung der Tage zwischen den beiden Datumsangaben aus:

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");
    }
}

Bei der ersten Ausführung des Beispiels werden beide DatePicker Ansichten auf das heutige Datum initialisiert. Der folgende Screenshot zeigt das Programm, das unter iOS und Android ausgeführt wird:

Wenn Sie auf eine der DatePicker Anzeigen tippen, wird die Plattformdatumsauswahl aufgerufen. Die Plattformen implementieren diese Datumsauswahl auf sehr unterschiedliche Weise, aber jeder Ansatz ist den Benutzern dieser Plattform vertraut:

Tipp

Unter Android kann das DatePicker Dialogfeld angepasst werden, indem die CreateDatePickerDialog Methode in einem benutzerdefinierten Renderer überschrieben wird. Dadurch können dem Dialogfeld beispielsweise zusätzliche Schaltflächen hinzugefügt werden.

Nachdem zwei Datumsangaben ausgewählt wurden, zeigt die Anwendung die Anzahl der Tage zwischen diesen Datumsangaben an:

Verwandte Links

• DaysBetweenDates-Beispiel
• DatePicker-API