Udostępnij przez

Selektor dat kalendarza

Selektor dat kalendarza to kontrolka listy rozwijanej zoptymalizowana pod kątem wybierania pojedynczej daty z widoku kalendarza, w którym ważne są informacje kontekstowe, takie jak dzień tygodnia lub pełnaość kalendarza. Możesz zmodyfikować kalendarz, aby udostępnić dodatkowy kontekst lub ograniczyć dostępne daty.

Czy jest to właściwa kontrola?

Użyj selektora dat kalendarza , aby umożliwić użytkownikowi wybranie pojedynczej daty z widoku kalendarza kontekstowego. Służy do wybierania terminu lub daty wyjazdu.

Aby umożliwić użytkownikowi wybranie znanej daty, takiej jak data urodzenia, gdzie kontekst kalendarza nie jest ważny, rozważ użycie selektora dat .

Aby uzyskać więcej informacji na temat wybierania właściwej kontrolki, zobacz artykuł Kontrolki daty i godziny .

Przykłady

Punkt wejścia wyświetla tekst zastępczy, jeśli data nie została ustawiona; w przeciwnym razie wyświetla wybraną datę. Gdy użytkownik wybierze punkt wejścia, widok kalendarza jest rozwijany, aby użytkownik wybrał datę. Widok kalendarza nakłada się na inne elementy interfejsu użytkownika; nie przesuwa ich.

Zrzut ekranu przedstawiający selektor dat kalendarza z pustym polem tekstowym, a następnie wypełnionym kalendarzem pod nim.

Tworzenie selektora dat kalendarza

Otwórz aplikację Galeria WinUI 3 i zobacz działanie calendarDatePicker

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Calendar"/>

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

Wynikowy selektor dat kalendarza wygląda następująco:

Zrzut ekranu przedstawiający wypełniony selektor dat kalendarza z etykietą o nazwie

Selektor dat kalendarza ma wewnętrzny element CalendarView do wybierania daty. Podzestaw właściwości CalendarView, takich jak IsTodayHighlighted i FirstDayOfWeek, istnieją na CalendarDatePicker i są przekazywane do wewnętrznego CalendarView, aby umożliwić jego modyfikację.

Nie można jednak zmienić opcji SelectionMode wewnętrznego widoku CalendarView, aby zezwolić na wybór wielu elementów. Jeśli chcesz zezwolić użytkownikowi na wybranie wielu dat lub wymaga, aby kalendarz był zawsze widoczny, rozważ użycie widoku kalendarza zamiast selektora dat kalendarza. Aby uzyskać więcej informacji na temat modyfikowania wyświetlania kalendarza, zobacz artykuł Widok kalendarza .

Wybieranie dat

Użyj właściwości Date , aby pobrać lub ustawić wybraną datę. Domyślnie właściwość Date ma wartość null. Gdy użytkownik wybierze datę w widoku kalendarza, ta właściwość zostanie zaktualizowana. Użytkownik może wyczyścić datę, klikając wybraną datę w widoku kalendarza, aby usunąć jego zaznaczenie.

Możesz ustawić datę w kodzie w następujący sposób.

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

Po ustawieniu daty w kodzie wartość jest ograniczona przez właściwości MinDate i MaxDate .

  • Jeśli Date jest mniejsza niż MinDate, wartość jest ustawiona na MinDate.
  • Jeśli Date jest większa niż MaxDate, wartość jest ustawiona na MaxDate.

Zdarzenie DateChanged można obsługiwać, aby otrzymywać powiadomienia o zmianie wartości Date.

Uwaga / Notatka

Aby uzyskać ważne informacje na temat wartości dat, zapoznaj się z wartościami DateTime i Calendar w artykule na temat kontrolki daty i godziny.

Ustawianie nagłówka i tekstu zastępczego

Możesz dodać nagłówek (lub etykietę) i symbol zastępczy ( lub znak wodny) do selektora dat kalendarza, aby nadać użytkownikowi wskazanie, do czego służy. Aby dostosować wygląd nagłówka, można ustawić właściwość HeaderTemplate zamiast Header.

Domyślny tekst zastępczy to "wybierz datę". Możesz to usunąć, ustawiając właściwość PlaceholderText na pusty ciąg lub możesz podać niestandardowy tekst, jak pokazano tutaj.

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

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

  • Last updated on