Freigeben über

Kalender-Datumswähler

Die Kalenderdatumsauswahl ist ein Dropdownsteuerelement, das für die Auswahl eines einzelnen Datums in einer Kalenderansicht optimiert ist, in der kontextbezogene Informationen wie der Wochentag oder die Belegung des Kalenders von Bedeutung sind. Sie können den Kalender ändern, um zusätzlichen Kontext bereitzustellen oder verfügbare Daten einzuschränken.

Ist dies das richtige Steuerelement?

Verwenden Sie eine Kalenderdatumsauswahl , um benutzern die Auswahl eines einzelnen Datums aus einer Kontextkalenderansicht zu ermöglichen. Verwenden Sie sie für Dinge wie die Auswahl eines Termins oder Eines Abreisedatums.

Damit Benutzer ein bekanntes Datum wie etwa einen Geburtstag eintragen können, bei dem der Kalenderkontext unwichtig ist, könnte eine Datumsauswahl von Vorteil sein.

Weitere Informationen zum Auswählen des richtigen Steuerelements finden Sie im Artikel zu Datums- und Uhrzeitsteuerelementen .

Examples

Der Einstiegspunkt zeigt Platzhaltertext an, wenn kein Datum festgelegt wurde; andernfalls wird das ausgewählte Datum angezeigt. Wenn der Benutzer den Einstiegspunkt auswählt, wird eine Kalenderansicht erweitert, damit der Benutzer eine Datumsauswahl treffen kann. Die Kalenderansicht überlagert andere Benutzeroberflächen; es wird keine andere Benutzeroberfläche weggeschoben.

Screenshot einer Kalenderdatumsauswahl mit einem leeren Textfeld zum Auswählen eines Datums, gefolgt von einem, das aufgefüllt ist, mit darunter liegendem Kalender.

Erstellen einer Kalenderdatumsauswahl

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie den CalendarDatePicker in Aktion.

WinUI 3-Katalogsymbol Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub. 
<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Calendar"/>

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

Die resultierende Kalenderdatumsauswahl sieht wie folgt aus:

Screenshot eines belegten Kalender-Datumswählers mit der Beschriftung

Die Datumsauswahl verfügt über eine interne CalendarView, um ein Datum auszuwählen. In CalendarDatePicker ist eine Teilmenge von CalendarView-Eigenschaften wie IsTodayHighlighted und FirstDayOfWeek vorhanden. Diese werden an die interne CalendarView-Klasse weitergeleitet, damit Sie sie ändern können.

Sie können jedoch die SelectionMode-Eigenschaft der internen CalendarView-Klasse nicht ändern und somit keine Mehrfachauswahl zulassen. Wenn Sie zulassen müssen, dass ein Benutzer mehrere Datumsangaben auswählt oder ein Kalender immer sichtbar sein muss, sollten Sie eine Kalenderansicht anstelle einer Kalenderdatumsauswahl verwenden. Weitere Informationen dazu, wie Sie die Kalenderanzeige ändern können, finden Sie im Artikel "Kalenderansicht ".

Auswählen von Datumsangaben

Verwenden Sie die Date-Eigenschaft, um das ausgewählte Datum abzurufen oder festzulegen. Standardmäßig ist die Date-Eigenschaft null. Wenn ein Benutzer ein Datum in der Kalenderansicht auswählt, wird diese Eigenschaft aktualisiert. Ein Benutzer kann das Datum löschen, indem er auf das ausgewählte Datum in der Kalenderansicht klickt, um die Auswahl aufzuheben.

Sie können das Datum in Ihrem Code wie folgt festlegen.

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

Wenn Sie das Datum in Code festlegen, wird der Wert durch die Eigenschaften MinDate und MaxDate beschränkt.

  • Wenn "Date" kleiner als "MinDate" ist, wird der Wert auf "MinDate" festgelegt.
  • Wenn "Date " größer als "MaxDate" ist, wird der Wert auf "MaxDate" festgelegt.

Mithilfe des DateChanged-Ereignisses können Sie sich bei Änderungen am Date-Wert benachrichtigen lassen.

Hinweis

Wichtige Informationen zu Datumswerten finden Sie im Artikel zu Datums- und Uhrzeitsteuerelementen unter "DateTime" und "Calendar" .

Festlegen eines Kopf- und Platzhaltertexts

Sie können der Kalenderdatumsauswahl eine Header-Eigenschaft (oder eine Beschriftung) und eine PlaceholderText-Eigenschaft (oder ein Wasserzeichen) hinzufügen, um Benutzern einen Hinweis zum Verwendungszweck zu geben. Um das Aussehen der Kopfzeile anzupassen, können Sie die HeaderTemplate-Eigenschaft anstelle von Header festlegen.

Der Standardplatzhaltertext lautet "Datum auswählen". Sie können dies entfernen, indem Sie die PlaceholderText-Eigenschaft auf eine leere Zeichenfolge festlegen oder wie hier gezeigt benutzerdefinierten Text bereitstellen.

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