Kalender-, Datums- und UhrzeitsteuerelementeCalendar, date, and time controls

Datums- und Uhrzeitsteuerelemente bieten Ihnen standardmäßige lokalisierte Methoden, den Benutzern die Anzeige oder Festlegung von Datums-und Uhrzeitwerten in Ihrer App zu ermöglichen.Date and time controls give you standard, localized ways to let a user view and set date and time values in your app. Dieser Artikel enthält Entwurfsrichtlinien und hilft Ihnen beim Auswählen des richtigen Steuerelements.This article provides design guidelines and helps you pick the right control.

Wichtige APIs: CalendarView-Klasse, CalendarDatePicker-Klasse, DatePicker-Klasse, TimePicker-KlasseImportant APIs: CalendarView class, CalendarDatePicker class, DatePicker class, TimePicker class

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn Sie die App XAML-Steuerelementekatalog installiert haben, klicken Sie hier, um die App zu öffnen und diese Steuerelemente in Aktion zu sehen.If you have the XAML Controls Gallery app installed, click here to open the app and see these controls in action.

Welches Datums- bzw. Uhrzeitsteuerelement sollten Sie verwenden?Which date or time control should you use?

Es stehen vier Datums- und Uhrzeitsteuerelemente zur Auswahl. Welches Steuerelement Sie verwenden, hängt vom jeweiligen Szenario ab.There are four date and time controls to choose from; the control you use depends on your scenario. Die Informationen in diesem Abschnitt sollen Ihnen dabei helfen, das richtige Steuerelement für Ihre App auszuwählen.Use this info to pick the right control to use in your app.

ControlControl BeispielExample BESCHREIBUNGDescription
KalenderansichtCalendar view Beispiel für eine Kalenderansicht Verwenden Sie diese Ansicht, um ein einzelnes Datum oder einen Datumsbereich aus einem immer sichtbaren Kalender auszuwählen.Use to pick a single date or a range of dates from an always visible calendar.
KalenderdatumsauswahlCalendar date picker Screenshot einer Kalenderdatumsauswahl. Verwenden Sie diese Ansicht, um ein einzelnes Datum aus einem kontextbezogenen Kalender auszuwählen.Use to pick a single date from a contextual calendar.
DatumsauswahlDate picker Beispiel für eine Datumsauswahl Verwenden Sie diese Ansicht, um ein einzelnes bekanntes Datum auszuwählen, wenn kontextbezogene Informationen nicht wichtig sind.Use to pick a single known date when contextual info isn't important.
ZeitauswahlTime picker Beispiel für Zeitauswahl Verwenden Sie diese Ansicht zum Auswählen eines einzelnen Uhrzeitwertes.Use to pick a single time value.

KalenderansichtCalendar view

Mit CalendarView können Benutzer einen Kalender anzeigen und mit diesem interagieren. Als Ansichten sind Monat, Jahr und zehn Jahre möglich.CalendarView lets a user view and interact with a calendar that they can navigate by month, year, or decade. Benutzer können ein einzelnes Datum oder einen Datumsbereich auswählen.A user can select a single date or a range of dates. Es gibt keine Auswahloberfläche, und der Kalender ist stets sichtbar.It doesn't have a picker surface and the calendar is always visible.

Die Kalenderansicht besteht aus drei Ansichten: Monat, Jahr und Jahrzehnt.The calendar view is made up of 3 separate views: the month view, year view, and decade view. Standardmäßig ist in der Kalenderansicht zunächst die Monatsansicht geöffnet, Sie können jedoch jede Ansicht als Startansicht angeben.By default, it starts with the month view open, but you can specify any view as the startup view.

Screenshot von drei Kalenderansichten mit einer Monatsansicht, einer Jahresansicht und einer Dekadenansicht.

  • Wenn es wichtig ist, das Benutzer gleichzeitig mehrere Tage auswählen können, müssen Sie eine CalendarView verwenden.If you need to let a user select multiple dates, you must use a CalendarView.
  • Wenn der Benutzern jeweils nur ein Datum auswählen soll und der Kalender nicht permanent sichtbar sein muss, kann möglicherweise ein Steuerelement CalendarDatePicker bzw. DatePicker verwendet werden.If you need to let a user pick only a single date and don't need a calendar to be always visible, consider using a CalendarDatePicker or DatePicker control.

KalenderdatumsauswahlCalendar date picker

CalendarDatePicker ist ein Dropdownsteuerelement, das für die Auswahl eines einzelnen Datums aus einer Kalenderansicht optimiert ist, in der kontextbezogene Informationen wie der Wochentag oder die Belegung des Kalenders von Bedeutung sind.CalendarDatePicker is a drop down control that's optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. Sie können den Kalender bearbeiten, um Kontext hinzuzufügen oder verfügbare Tage einzugrenzen.You can modify the calendar to provide additional context or to limit available dates.

Der Einstiegspunkt zeigt Platzhaltertext an, falls kein Datum festgelegt wurde. Andernfalls wird das ausgewählte Datum angezeigt.The entry point displays placeholder text if a date has not been set; otherwise, it displays the chosen date. Wenn Benutzer den Einstiegspunkt auswählen, wird eine Kalenderansicht eingeblendet, damit sie ein Datum auswählen können.When the user selects the entry point, a calendar view expands for the user to make a date selection. Die Kalenderansicht überlagert andere Elemente der Benutzeroberfläche. Die anderen Elemente der Benutzeroberfläche werden dadurch jedoch nicht „beiseitegeschoben“.The calendar view overlays other UI; it doesn't push other UI out of the way.

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

  • Verwenden Sie eine Kalenderdatumsauswahl, um beispielsweise einen Termin oder ein Abreisedatum auszuwählen.Use a calendar date picker for things like choosing an appointment or departure date.

DatumsauswahlDate picker

Das DatePicker-Steuerelement bietet eine standardisierte Methode zum Auswählen eines bestimmten Datums.The DatePicker control provides a standardized way to choose a specific date.

Der Einstiegspunkt zeigt das ausgewählte Datum an, und wenn der Benutzer den Einstiegspunkt auswählt, wird eine Auswahloberfläche von der Bildschirmmitte aus vertikal erweitert, damit eine Auswahl getroffen werden kann.The entry point displays the chosen date, and when the user selects the entry point, a picker surface expands vertically from the middle for the user to make a selection. Die Datumsauswahl überlagert andere Elemente der Benutzeroberfläche; die anderen Elemente der Benutzeroberfläche werden jedoch nicht „beiseitegeschoben“.The date picker overlays other UI; it doesn't push other UI out of the way.

Beispiel für die Erweiterung der Datumsauswahl

  • Verwenden Sie eine Datumsauswahl, damit Benutzer ein bekanntes Datum wie etwa einen Geburtstag auswählen können, bei dem der Kalenderkontext unwichtig ist.Use a date picker to let a user pick a known date, such as a date of birth, where the context of the calendar is not important.

ZeitauswahlTime picker

TimePicker wird zur Auswahl eines einzelnen Uhrzeitwertes für Termine oder Abreisezeiten verwendet.The TimePicker is used to select a single time value for things like appointments or a departure time. Es handelt sich um eine statische Anzeige, die vom Benutzer oder im Code festgelegt wird, jedoch nicht aktualisiert wird, um die aktuelle Uhrzeit anzuzeigen.It's a static display that is set by the user or in code, but it doesn't update to display the current time.

Der Einstiegspunkt zeigt die ausgewählte Uhrzeit an, und wenn der Benutzer den Einstiegspunkt auswählt, wird eine Auswahloberfläche von der Bildschirmmitte aus vertikal erweitert, damit er eine Auswahl treffen kann.The entry point displays the chosen time, and when the user selects the entry point, a picker surface expands vertically from the middle for the user to make a selection. Die Zeitauswahl überlagert andere Elemente der Benutzeroberfläche. Die anderen Elemente der Benutzeroberfläche werden dadurch jedoch nicht „verschoben“.The time picker overlays other UI; it doesn't push other UI out of the way.

Beispiel für die Erweiterung der Zeitauswahl

  • Verwenden Sie die Zeitauswahl, um Benutzern die Auswahl eines einzelnen Zeitwerts zu ermöglichen.Use a time picker to let a user pick a single time value.

Erstellen eines Datums oder UhrzeitsteuerelementsCreate a date or time control

Informationen und Beispiele zu den einzelnen Datums- und Textsteuerelementen finden Sie in den folgenden Artikeln.See these articles for info and examples specific to each date and time control.

GlobalisierungGlobalization

Die XAML-Datumssteuerelemente unterstützen jedes der von Windows unterstützten Kalendersysteme.The XAML date controls support each of the calendar systems supported by Windows. Diese Kalender werden in der Windows.Globalization.CalendarIdentifiers-Klasse angegeben.These calendars are specified in the Windows.Globalization.CalendarIdentifiers class. Jedes Steuerelement verwendet den richtigen Kalender für die standardmäßige Sprache Ihrer App. Alternativ können Sie die CalendarIdentifier-Eigenschaft festlegen, um ein bestimmtes Kalendersystem zu verwenden.Each control uses the correct calendar for your app's default language, or you can set the CalendarIdentifier property to use a specific calendar system.

Das Zeitauswahl-Steuerelement unterstützt jedes der Uhrsysteme, die in der Windows.Globalization.ClockIdentifiers-Klasse angegeben sind.The time picker control supports each of the clock systems specified in the Windows.Globalization.ClockIdentifiers class. Sie können für die ClockIdentifier-Eigenschaft festlegen, dass das 12-Stunden- oder 24-Stunden-Uhrzeitformat verwendet werden soll.You can set the ClockIdentifier property to use either a 12-hour clock or 24-hour clock. Die Art der Eigenschaft ist „String“ (Zeichenfolge), Sie müssen jedoch Werte verwenden, die den statischen Zeichenfolgeneigenschaften der ClockIdentifiers-Klasse entsprechen.The type of the property is String, but you must use values that correspond to the static string properties of the ClockIdentifiers class. Dies lauten: TwelveHour (Zeichenfolge „12HourClock“) und TwentyFourHour (Zeichenfolge „24HourClock“).These are: TwelveHour (the string "12HourClock")and TwentyFourHour (the string "24HourClock"). Der Standardwert lautet „12HourClock“"12HourClock" is the default value.

Werte für Datum/Uhrzeit und KalenderDateTime and Calendar values

Die in den XAML-Datums- und Uhrzeitsteuerelementen verwendeten Datumsobjekte weisen je nach Programmiersprache eine unterschiedliche Darstellung auf.The date objects used in the XAML date and time controls have a different representation depending on your programming language.

Ein verwandtes Konzept ist die Calendar-Klasse, die beeinflusst, wie die Daten im Kontext interpretiert werden.A related concept is the Calendar class, which influences how dates are interpreted in context. Alle Windows-Runtime-Apps können die Windows.Globalization.Calendar-Klasse verwenden.All Windows Runtime apps can use the Windows.Globalization.Calendar class. C# und Visual Basic-Apps können auch die System.Globalization.Calendar-Klasse verwenden. Diese weist eine sehr ähnliche Funktionalität auf.C# and Visual Basic apps can alternatively use the System.Globalization.Calendar class, which has very similar functionality. (Windows-Runtime-Apps können die .NET-Basisklasse Calendar verwenden, nicht jedoch die spezifischen Implementierungen wie z. B. GregorianCalendar.)(Windows Runtime apps can use the base .NET Calendar class but not the specific implementations; for example, GregorianCalendar.)

.NET unterstützt auch einen Typ mit der Bezeichnung DateTime, der implizit in DateTimeOffset konvertierbar ist..NET also supports a type named DateTime, which is implicitly convertible to a DateTimeOffset. Somit könnte ein Typ „DateTime“ in .NET-Code verwendet werden, der zum Festlegen von Werten verwendet wird, bei denen es sich eigentlich um DateTimeOffset handelt.So you might see a "DateTime" type being used in .NET code that's used to set values that are really DateTimeOffset. Weitere Informationen zum Unterschied zwischen DateTime und DateTimeOffset finden Sie in den Bemerkungen in der DateTimeOffset-Klasse.For more info on the difference between DateTime and DateTimeOffset, see Remarks in the DateTimeOffset class.

Hinweis

Eigenschaften, die Datumsobjekte verwenden, können nicht als XAML-Attributzeichenfolge festgelegt werden, da der Windows-Runtime-XAML-Parser nicht über eine Konvertierungslogik zum Konvertieren von Zeichenfolgen in Datumsangaben als DateTime/DateTimeOffset-Objekte verfügt.Properties that take date objects can't be set as a XAML attribute string, because the Windows Runtime XAML parser doesn't have a conversion logic for converting strings to dates as DateTime/DateTimeOffset objects. In der Regel legen Sie diese Werte im Code fest.You typically set these values in code. Eine andere Möglichkeit besteht darin, ein Datum zu definieren, das als Datenobjekt oder im Datenkontext verfügbar ist, und anschließend die Eigenschaft als XAML-Attribut festzulegen, das auf einen {Binding}-Markuperweiterung-Ausdruck verweist, der auf das Datum als Daten zugreifen kann.Another possible technique is to define a date that's available as a data object or in the data context, then set the property as a XAML attribute that references a {Binding} markup extension expression that can access the date as data.

Beispielcode herunterladenGet the sample code

Für Entwickler (XAML)For developers (XAML)