Freigeben über

DatePicker

  • Artikel

Der .NET Multi-Platform App UI (.NET MAUI) DatePicker ruft das Steuerelement für die Datumsauswahl der Plattform auf und ermöglicht die Auswahl eines Datums.

DatePicker definiert acht Eigenschaften:

  • MinimumDate vom Typ DateTime, standardmäßig auf den ersten Tag des Jahres 1900 gesetzt.
  • MaximumDate vom Typ DateTime, standardmäßig auf den letzten Tag des Jahres 2100 gesetzt.
  • Date vom Typ DateTime, das ausgewählte Datum, standardmäßig auf DateTime.Today gesetzt.
  • Format vom Typ string, eine Standard- oder benutzerdefinierte .NET-Formatierungszeichenfolge, die standardmäßig auf „D“, das lange Datumsmuster, gesetzt ist.
  • TextColor vom Typ Color, die Farbe, die für die Anzeige des ausgewählten Datums verwendet wird.
  • FontAttributes vom Typ FontAttributes, standardmäßig auf FontAtributes.None gesetzt.
  • FontFamily vom Typ string, standardmäßig auf null gesetzt.
  • FontSize vom Typ double, standardmäßig auf -1,0 gesetzt.
  • CharacterSpacing vom Typ double: Abstand zwischen den Zeichen des DatePicker-Texts.

All diese Eigenschaften werden durch BindableProperty-Objekte unterstützt, was bedeutet, dass sie formatiert werden können und Ziele von Datenbindungen sein können. Die Date-Eigenschaft hat einen Standardbindungsmodus von BindingMode.TwoWay, was bedeutet, dass sie ein Ziel einer Datenbindung in einer Anwendung sein kann, die das Model-View-ViewModel (MVVM)-Muster verwendet.

Warnung

Stellen Sie beim Festlegen von MinimumDate und MaximumDate sicher, dass MinimumDate immer kleiner als oder gleich MaximumDate ist. Andernfalls löst DatePicker eine Ausnahme aus.

Der DatePicker stellt sicher, dass das Date im Bereich von MinimumDate bis MaximumDate liegt. Wenn MinimumDate oder MaximumDate so festgelegt ist, dass das Date nicht dazwischen liegt, passt der DatePicker den Wert des Date an.

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

Erstellen eines DatePickers

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 umzuwandeln. Die Daten müssen in einem exakten Format angegeben werden: Monate zweistellig, Tage zweistellig und Jahre vierstellig, getrennt durch Schrägstriche:

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

Wenn die BindingContext-Eigenschaft des DatePicker auf eine Instanz eines ViewModels gesetzt ist, das Eigenschaften vom Typ DateTime mit (zum Beispiel) den Namen MinDate, MaxDate und SelectedDate enthält, können Sie den DatePicker wie folgt instanziieren:

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

In diesem Beispiel werden alle drei Eigenschaften auf die entsprechenden Eigenschaften im ViewModel initialisiert. Da die Date-Eigenschaft einen TwoWay-Bindungsmodus hat, wird jedes neue Datum, das der*die Benutzer*in auswählt, automatisch im ViewModel angezeigt.

Wenn der DatePicker keine Bindung an seine Date-Eigenschaft enthält, sollte Ihre App einen Handler zum DateSelected-Ereignis hinzufügen, um benachrichtigt zu werden, wenn der*die Benutzer*in ein neues Datum auswählt.

Im Code können die MinimumDate-, MaximumDate- und Date-Eigenschaften auf Werte vom Typ DateTime initialisiert werden:

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

Weitere Informationen zum Festlegen von Schriftarteigenschaften finden Sie unter Schriftarten.

DatePicker und Layout

Es ist möglich, mit dem DatePicker eine uneingeschränkte horizontale Layoutoption wie Center, Start oder End zu verwenden:

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

Dies wird jedoch nicht empfohlen. Je nach Einstellung der Format-Eigenschaft können ausgewählte Daten unterschiedliche Anzeigebreiten erfordern. Beispielsweise bewirkt die Formatzeichenkette „D“, dass DateTime Daten in einem langen Format anzeigt, 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 die DateTime-Ansicht die Breite im Layout ändert oder die Anzeige abgeschnitten wird.

Tipp

Es wird empfohlen, die Standart-HorizontalOptions-Einstellung Fill mit dem DatePicker zu verwenden und keine Auto-Breite zu verwenden, wenn Sie den DatePicker in eine Grid-Zelle einfügen.

Lokalisieren eines DatePicker-Elements unter Windows

Für Apps, die für Windows vorgesehen sind, müssen Sie sicherstellen, dass das DatePicker-Element Datumsangaben in einem Format anzeigt, das gemäß den Einstellungen des Benutzers oder der Benutzerin lokalisiert ist, einschließlich der Bezeichnungen von Monaten und Tagen im Auswahldialogfeld. Dazu ist eine bestimmte Konfiguration in der Datei Package.appxmanifest Ihres Projekts erforderlich. Durch die Lokalisierung der Elemente im Paketmanifest wird die Benutzererfahrung verbessert, da die kulturellen Normen des Gebietsschemas des Benutzers oder der Benutzerin eingehalten werden.

Zum Lokalisieren der Datumsformate und Zeichenfolgen in <xref:Microsoft.Maui.Controls.DatePicker> müssen die unterstützten Sprachen in der Datei Package.appxmanifest deklariert werden.

Führen Sie die folgenden Schritte aus, um Ihr DatePicker-Element für die Lokalisierung unter Windows zu konfigurieren:

  1. Suchen Sie den Abschnitt „Resources“.

    Navigieren Sie zum Ordner Platforms\Windows Ihres Projekts, und öffnen Sie die Datei Package.appxmanifest in einem Code-Editor oder in Visual Studio. Stellen Sie bei Verwendung von Visual Studio sicher, dass Sie die unformatierte XML-Datei anzeigen. Suchen Sie nach dem Abschnitt <Resources>, der anfangs Folgendes enthalten kann:

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

  2. Geben Sie die unterstützten Sprachen an.

    Ersetzen Sie das <Resource Language="x-generate">-Element für jede Ihrer unterstützten Sprachen durch <Resource />-Elemente. Der Sprachcode muss in Form eines BCP-47-Sprachtags angegeben werden, z. B. mit en-US für Englisch (USA), es-ES für Spanisch (Spanien), fr-FR für Französisch (Frankreich) oder de-DE für Deutsch (Deutschland). Wenn Sie beispielsweise Unterstützung für Englisch (USA) und Spanisch (Spanien) hinzufügen möchten, sollte Ihr Abschnitt <Resources> wie folgt geändert werden:

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

Diese Konfiguration stellt sicher, dass das DatePicker-Element Datumsformate sowie Monats- und Tagesbezeichnungen entsprechend dem Gebietsschema des Benutzers bzw. der Benutzerin anzeigt, wodurch die Benutzerfreundlichkeit und Barrierefreiheit der App in verschiedenen Regionen erheblich verbessert wird.

Weitere Informationen zur Lokalisierung in .NET MAUI-Apps finden Sie unter Lokalisierung.