Udostępnij przez

Selektor daty

Selektor dat zapewnia ustandaryzowany sposób zezwalania użytkownikom na wybieranie zlokalizowanej wartości daty przy użyciu wprowadzania dotyku, myszy lub klawiatury.

Przykład selektora daty

Czy jest to właściwa kontrola?

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

Jeśli kontekst kalendarza jest ważny, rozważ użycie selektora dat lub widoku kalendarza .

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

Przykłady

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

Tworzenie selektora dat

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

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

W tym przykładzie pokazano, jak utworzyć prosty selektor dat z nagłówkiem.

<DatePicker x:Name="exampleDatePicker" Header="Pick a date"/>

DatePicker exampleDatePicker = new DatePicker();
exampleDatePicker.Header = "Pick a date";

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

Przykład selektora daty

Formatowanie selektora dat

Domyślnie selektor dat pokazuje dzień, miesiąc i rok. Jeśli scenariusz selektora dat nie wymaga wszystkich pól, możesz ukryć te, których nie potrzebujesz. Aby ukryć pole, ustaw odpowiednią właściwość pola Visible na wartość false: DayVisible, MonthVisiblelub YearVisible.

W tym miejscu potrzebny jest tylko rok, więc pola dzień i miesiąc są ukryte.

<DatePicker x:Name="yearDatePicker" Header="In what year was Microsoft founded?" 
            MonthVisible="False" DayVisible="False"/>

Selektor dat z ukrytymi polami dnia i miesiąca.

Zawartość ciągu każdego ComboBox w DatePicker jest tworzona przez DateTimeFormatter. Informujesz DateTimeFormatter, jak sformatować wartość daty, podając ciąg, który jest szablonem formatu lub wzorcem formatu . Aby uzyskać więcej informacji, zobacz właściwości DayFormat, MonthFormati YearFormat.

W tym miejscu wzorzec formatu służy do pokazywania miesiąca jako liczby całkowitej i skrótu. Możesz dodać dosłowne ciągi znaków do wzorca formatu, na przykład nawiasy wokół skrótu miesiąca: ({month.abbreviated}).

<DatePicker MonthFormat="{}{month.integer(2)} ({month.abbreviated})" DayVisible="False"/>

Selektor dat z ukrytym polem dnia.

Wartości daty

Kontrolka selektora dat ma zarówno Data/DataZmieniona, jak i WybranaData/DataWybranaZmieniona interfejsy API. Różnica między nimi polega na tym, że Date nie jest zerowalne, podczas gdy SelectedDate jest zerowalne.

Wartość SelectedDate jest używana do wypełniania selektora dat i jest domyślnie null. Jeśli SelectedDate jest null, właściwość Date jest ustawiona na 12/31/1600; w przeciwnym razie wartość Date jest synchronizowana z wartością SelectedDate. Gdy SelectedDate jest null, selektor jest "niezastawiony" i wyświetla nazwy pól zamiast daty.

Selektor dat bez wybranej daty.

Możesz ustawić właściwości MinYear i MaxYear, aby ograniczyć wartości daty w selektorze. Domyślnie MinYear jest ustawiona na 100 lat przed bieżącą datą, a MaxYear jest ustawiona na 100 lat po bieżącej dacie.

Jeśli ustawisz tylko MinYear lub MaxYear, musisz upewnić się, że prawidłowy zakres dat jest tworzony według ustawionej daty i wartości domyślnej innej daty; w przeciwnym razie żadna data nie będzie dostępna do wybrania w selektorze. Na przykład ustawienie tylko yearDatePicker.MaxYear = new DateTimeOffset(new DateTime(900, 1, 1)); tworzy nieprawidłowy zakres dat z wartością domyślną MinYear.

Inicjowanie wartości daty

Właściwości daty nie można ustawić jako ciągu atrybutu XAML, ponieważ analizator XAML w środowisku uruchomieniowym Windows nie posiada logiki umożliwiającej przekształcenie ciągów w daty w postaci obiektów DateTime / DateTimeOffset. Poniżej przedstawiono kilka sugerowanych sposobów, w jaki te obiekty można zdefiniować w kodzie i ustawić datę inną niż bieżąca data.

Inną możliwą techniką jest zdefiniowanie daty dostępnej jako obiekt danych lub w kontekście danych, a następnie ustawienie właściwości date jako atrybutu XAML odwołującego się do rozszerzenia znaczników {Binding}, które mogą uzyskać dostęp do daty jako danych.

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.

W tym przykładzie pokazano ustawienie właściwości SelectedDate, MinYeari MaxYear dla różnych kontrolek DatePicker.

<DatePicker x:Name="yearDatePicker" MonthVisible="False" DayVisible="False"/>
<DatePicker x:Name="arrivalDatePicker" Header="Arrival date"/>

public MainPage()
{
    this.InitializeComponent();

    // Set minimum year to 1900 and maximum year to 1999.
    yearDatePicker.SelectedDate = new DateTimeOffset(new DateTime(1950, 1, 1));
    yearDatePicker.MinYear = new DateTimeOffset(new DateTime(1900, 1, 1));
    // Using a different DateTimeOffset constructor.
    yearDatePicker.MaxYear = new DateTimeOffset(1999, 12, 31, 0, 0, 0, new TimeSpan());

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

Użycie wartości dat

Aby użyć wartości daty w aplikacji, zwykle stosujesz wiązanie danych z właściwością SelectedDate lub obsługujesz zdarzenie SelectedDateChanged.

Aby zapoznać się z przykładem użycia DatePicker i TimePicker razem w celu zaktualizowania pojedynczej DateTime wartości, sprawdź Kontrole kalendarza, daty i czasu — użyj selektora daty i selektora czasu razem.

W tym miejscu użyjesz DatePicker, aby umożliwić użytkownikowi wybranie daty przyjazdu. Należy obsłużyć zdarzenie SelectedDateChanged w celu zaktualizowania instancji DateTime o nazwie arrivalDateTime.

<StackPanel>
    <DatePicker x:Name="arrivalDatePicker" Header="Arrival date"
                DayFormat="{}{day.integer} ({dayofweek.abbreviated})"
                SelectedDateChanged="arrivalDatePicker_SelectedDateChanged"/>
    <Button Content="Clear" Click="ClearDateButton_Click"/>
    <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 arrivalDatePicker_SelectedDateChanged(DatePicker sender, DatePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalDatePicker.SelectedDate != null)
        {
            arrivalDateTime = new DateTime(args.NewDate.Value.Year, args.NewDate.Value.Month, args.NewDate.Value.Day);
        }
        arrivalText.Text = arrivalDateTime.ToString();
    }

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

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.

  • kontrolki daty i godziny
  • Wybieracz daty z kalendarza
  • widok kalendarza
  • Selektor czasu
  • Last updated on