Udostępnij przez

Kontrolki Kalendarz, Data i Godzina

Kontrolki daty i godziny zapewniają standardowe, zlokalizowane sposoby zezwalania użytkownikowi na wyświetlanie i ustawianie wartości daty i godziny w aplikacji. Ten artykuł zawiera wskazówki dotyczące projektowania i pomaga wybrać właściwą kontrolę.

Otwórz aplikację Galeria WinUI 3 i zobacz kontrolki Data i godzina w działaniu

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

Której kontrolki daty lub godziny należy użyć?

Istnieją cztery kontrolki daty i godziny do wyboru; kontrolka, której używasz, zależy od danego scenariusza. Użyj tych informacji, aby wybrać odpowiednią kontrolkę do użycia w aplikacji.

Kontrola Example Description
Widok kalendarza Przykład widoku kalendarza Służy do wybierania pojedynczej daty lub zakresu dat z zawsze widocznego kalendarza.
Selektor dat kalendarza Zrzut ekranu przedstawiający selektor dat kalendarza. Służy do wybierania pojedynczej daty z kalendarza kontekstowego.
Selektor daty Przykład selektora daty Użyj polecenia , aby wybrać jedną znaną datę, gdy informacje kontekstowe nie są ważne.
Wybór godziny Przykład selektora czasu Użyj polecenia , aby wybrać pojedynczą wartość czasu.

Widok kalendarza

Funkcja CalendarView umożliwia użytkownikowi wyświetlanie kalendarza i interakcję z nim, który może nawigować według miesiąca, roku lub dekady. Użytkownik może wybrać jedną datę lub zakres dat. Nie ma powierzchni wybieraka, a kalendarz jest zawsze widoczny.

Widok kalendarza składa się z 3 oddzielnych widoków: widoku miesiąca, widoku roku i widoku dekady. Domyślnie rozpoczyna się od otwartego widoku miesiąca, ale można określić dowolny widok jako widok uruchamiania.

Zrzut ekranu przedstawiający trzy widoki kalendarza z widokiem miesiąca, widokiem roku i widokiem dekady.

  • Jeśli musisz zezwolić użytkownikowi na wybranie wielu dat, musisz użyć widoku CalendarView.
  • Jeśli chcesz zezwolić użytkownikowi na wybranie tylko jednej daty i nie musisz, aby kalendarz był zawsze widoczny, rozważ użycie kontrolki CalendarDatePicker lub DatePicker .

Selektor dat kalendarza

CalendarDatePicker to kontrolka listy rozwijanej zoptymalizowana pod kątem wybierania pojedynczej daty z widoku kalendarza, w której 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.

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.

  • Użyj selektora dat kalendarza, aby wybrać termin lub datę odlotu.

Selektor daty

Kontrolka DatePicker zapewnia ustandaryzowany sposób wybierania określonej daty.

Punkt wejścia wyświetla wybraną datę, a gdy użytkownik wybierze punkt wejścia, interfejs selekcji rozwija się w pionie od środka, umożliwiając użytkownikowi dokonanie wyboru. Selektor daty zakrywa inne elementy interfejsu użytkownika; nie usuwa innych elementów interfejsu użytkownika.

Przykład selektora dat rozszerzającego

  • Użyj selektora dat, aby umożliwić użytkownikowi wybranie znanej daty, takiej jak data urodzenia, gdzie kontekst kalendarza nie jest ważny.

Wybór godziny

Platforma TimePicker służy do wybierania pojedynczej wartości czasu dla elementów, takich jak terminy lub godzina odlotu. Jest to statyczny ekran, który jest ustawiany przez użytkownika lub w kodzie, ale nie jest aktualizowany w celu wyświetlenia bieżącej godziny.

Punkt wejścia wyświetla wybraną godzinę, a gdy użytkownik wybierze punkt wejścia, okno wyboru rozszerza się w pionie od środka, umożliwiając dokonanie wyboru. Selektor czasu nakłada się na inne elementy interfejsu użytkownika; nie przesuwa innych elementów interfejsu.

Przykład rozszerzania selektora czasu

  • Użyj selektora czasu, aby umożliwić użytkownikowi wybranie pojedynczej wartości czasu.

Tworzenie kontrolki daty lub godziny

Zapoznaj się z tymi artykułami, aby uzyskać informacje i przykłady specyficzne dla każdej kontrolki daty i godziny.

Użyj selektora dat i selektora czasu razem

W tym przykładzie pokazano, jak używać a DatePicker i TimePicker razem, aby umożliwić użytkownikowi wybranie daty i godziny przyjazdu. Zdarzenia i SelectedDateChanged są obsługiwane w SelectedTimeChanged celu zaktualizowania pojedynczego wystąpienia typu DateTime o nazwie arrivalDateTime. Użytkownik może również wyczyścić selektory daty i godziny po ich ustawieniu.

Selektor dat, selektor godziny, przycisk i etykieta tekstowa. 

<StackPanel>
    <DatePicker x:Name="arrivalDatePicker" Header="Arrival date"
                DayFormat="{}{day.integer} ({dayofweek.abbreviated})"
                SelectedDateChanged="ArrivalDatePicker_SelectedDateChanged"/>
    <StackPanel Orientation="Horizontal">
        <TimePicker x:Name="arrivalTimePicker" Header="Arrival time"
                MinuteIncrement="15"
                SelectedTimeChanged="ArrivalTimePicker_SelectedTimeChanged"/>
        <Button Content="Clear" Click="ClearDateButton_Click"
                VerticalAlignment="Bottom" Height="30" Width="54"/>
    </StackPanel>
    <TextBlock x:Name="arrivalText" Margin="0,12"/>
</StackPanel>

public sealed partial class MainPage : Page
{
    DateTime arrivalDateTime;

    public MainPage()
    {
        this.InitializeComponent();

        // Set minimum to the current year and maximum to five years from now.
        arrivalDatePicker.MinYear = DateTimeOffset.Now;
        arrivalDatePicker.MaxYear = DateTimeOffset.Now.AddYears(5);
    }

    private void ArrivalTimePicker_SelectedTimeChanged(TimePicker sender, TimePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalTimePicker.SelectedTime != null)
        {
            arrivalDateTime = new DateTime(arrivalDateTime.Year, arrivalDateTime.Month, arrivalDateTime.Day,
                                           args.NewTime.Value.Hours, args.NewTime.Value.Minutes, args.NewTime.Value.Seconds);
        }
        arrivalText.Text = arrivalDateTime.ToString();
    }

    private void ArrivalDatePicker_SelectedDateChanged(DatePicker sender, DatePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalDatePicker.SelectedDate != null)
        {
            if (VerifyDateIsFuture((DateTimeOffset)arrivalDatePicker.SelectedDate) == true)
            {
                arrivalDateTime = new DateTime(args.NewDate.Value.Year, args.NewDate.Value.Month, args.NewDate.Value.Day,
                                               arrivalDateTime.Hour, arrivalDateTime.Minute, arrivalDateTime.Second);
                arrivalText.Text = arrivalDateTime.ToString();
            }
            else
            {
                arrivalDatePicker.SelectedDate = null;
                arrivalText.Text = "Arrival date must be later than today.";
            }
        }
    }

    private bool VerifyDateIsFuture(DateTimeOffset date)
    {
        if (date > DateTimeOffset.Now)
        {
            return true;
        }
        return false;
    }

    private void ClearDateButton_Click(object sender, RoutedEventArgs e)
    {
        arrivalDateTime = new DateTime();
        arrivalDatePicker.SelectedDate = null;
        arrivalTimePicker.SelectedTime = null;
        arrivalText.Text = string.Empty;
    }
}

Globalization

Kontrolki daty XAML obsługują wszystkie systemy kalendarzy obsługiwane przez system Windows. Te kalendarze są określone w klasie Windows.Globalization.CalendarIdentifiers . Każda kontrolka używa poprawnego kalendarza dla języka domyślnego aplikacji lub można ustawić właściwość CalendarIdentifier , aby używać określonego systemu kalendarzy.

Kontrolka selektora czasu obsługuje każdy z systemów zegarowych określonych w klasie Windows.Globalization.ClockIdentifiers . Właściwość ClockIdentifier można ustawić tak, aby korzystała z zegara 12-godzinnego lub 24-godzinnego. Typ właściwości to String, ale należy użyć wartości odpowiadających właściwościom statycznego ciągu klasy ClockIdentifiers. Są to: TwelveHour (ciąg "12HourClock") i TwentyFourHour (ciąg "24HourClock"). Wartość domyślna to "12HourClock".

Wartości daty/godziny i kalendarza

Obiekty daty używane w kontrolkach daty i godziny XAML mają inną reprezentację w zależności od języka programowania.

Powiązana koncepcja to klasa Calendar, która wpływa na sposób interpretowania dat w kontekście. Wszystkie aplikacje środowiska uruchomieniowego systemu Windows mogą używać klasy Windows.Globalization.Calendar . Aplikacje języka C# i Visual Basic mogą również używać klasy System.Globalization.Calendar , która ma bardzo podobne funkcje. (Aplikacje środowiska uruchomieniowego systemu Windows mogą używać podstawowej klasy kalendarzy platformy .NET, ale nie określonych implementacji, na przykład GregorianCalendar).

Platforma .NET obsługuje również typ o nazwie DateTime, który jest niejawnie konwertowany na wartość DateTimeOffset. Dlatego w kodzie platformy .NET może być wyświetlany typ "DateTime", który jest używany do ustawiania wartości, które są naprawdę typu DateTimeOffset. Aby uzyskać więcej informacji na temat różnic między wartościami DateTime i DateTimeOffset, zobacz Uwagi w klasie DateTimeOffset .

Uwaga / Notatka

Właściwości, które przyjmują obiekty daty, nie można ustawić jako ciągu atrybutu XAML, ponieważ analizator XAML środowiska uruchomieniowego systemu Windows nie ma logiki konwersji do konwertowania ciągów na daty jako obiektów DateTime/DateTimeOffset. Zazwyczaj te wartości są ustawiane w kodzie. Inną możliwą techniką jest zdefiniowanie daty dostępnej jako obiektu danych lub w kontekście danych, a następnie ustawienie właściwości jako atrybutu XAML odwołującego się do wyrażenia rozszerzenia znaczników {Binding} , które może uzyskać dostęp do daty jako danych.

Pobieranie przykładowego kodu

Dla deweloperów (XAML)

  • Last updated on