Udostępnij za pośrednictwem

Selektor dat kalendarza

  • Artykuł

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 wybieraka daty w kalendarzu pokazujący puste pole tekstowe do wyboru daty, a następnie wypełnione z kalendarzem pod nim.

Tworzenie selektora dat kalendarza

Otwórz aplikację Galerii WinUI 3 i zobacz działanie CalendarDatePicker

Aplikacja z galerii WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze sklepu Microsoft Store 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ą z napisem

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

Nie można jednak zmienić SelectionMode wewnętrznego widoku kalendarza, 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 o sposobach modyfikacji wyświetlania kalendarza, zobacz artykuł Calendar view.

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 Data jest mniejsza niż MinDate, wartość jest ustawiona na MinDate.
  • Jeśli data jest większa niż MaxDate, wartość jest ustawiona na MaxDate.

Możesz obsłużyć zdarzenie DateChanged, aby otrzymywać powiadomienia o zmianie wartości daty.

Notatka

Aby uzyskać ważne informacje na temat wartości typu DateTime i Calendar, zobacz sekcję i w artykule dotyczącym kontrolek daty i godziny.

Ustawianie nagłówka i tekstu zastępczego

Do selektora dat kalendarza można dodać nagłówek (lub etykietę) oraz tekst zastępczy (lub znak wodny), aby użytkownik wiedział, do czego służy. Aby dostosować wygląd nagłówka, możesz 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żny

Informacje i przykłady przedstawione w tym artykule są zoptymalizowane pod kątem aplikacji korzystających z zestawu Windows App SDK i WinUI 3, ale są one ogólnie stosowane do aplikacji platformy UWP korzystających z interfejsu 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.

Interfejsy API dla tej kontrolki znajdują się w przestrzeni nazw Windows.UI.Xaml.Controls.

Zalecamy korzystanie z 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 Corner radius.