Kalendářní výběr

Výběrový prvek pro datum poskytuje standardizovaný způsob, jak uživatelům umožnit vybrat lokalizovanou hodnotu data pomocí dotykového ovládání, myši nebo vstupu klávesnice.

Je to správná kontrola?

Výběr data umožňuje uživateli vybrat známé datum, například datum narození, kde kontext kalendáře není důležitý.

Pokud je kontext kalendáře důležitý, zvažte použití výběru data kalendáře nebo zobrazení kalendáře.

Další informace o výběru správného ovládacího prvku data najdete v článku Ovládací prvky data a času .

Examples

Vstupní bod zobrazuje zvolené datum, a poté, co uživatel vybere vstupní bod, výběrové rozhraní se rozbalí svisle od středu, aby uživatel mohl provést výběr. Výběr data překrývá jiné uživatelské rozhraní; nepřesouvá jiné uživatelské rozhraní stranou.

rozbalovacího výběru data

Vytvoření výběru data

• důležitá rozhraní API:třída DatePicker, SelectedDate – vlastnost

Otevřete aplikaci Galerie WinUI 3 a podívejte se na akci DatePicker.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Tento příklad ukazuje, jak vytvořit jednoduchý kalendář s výběrem data a záhlavím.

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

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

Výsledný výběr data vypadá takto:

Formátování prvku pro výběr data

Ve výchozím nastavení se ve výběru data zobrazuje den, měsíc a rok. Pokud váš scénář pro výběr data nevyžaduje všechna pole, můžete skrýt ty, které nepotřebujete. Pokud chcete pole skrýt, nastavte vlastnost Visible odpovídajícího pole na false: DayVisible, MonthVisiblenebo YearVisible.

Tady je potřeba jenom rok, takže pole pro den a měsíc nejsou zobrazená.

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

Obsah řetězce každého ComboBox v DatePicker je vytvořen pomocí DateTimeFormatter . Informujete DateTimeFormatter, jak formátovat hodnotu data zadáním řetězce, který je buď formátová šablona nebo formátový vzor . Další informace naleznete ve vlastnostech DayFormat, MonthFormata YearFormat.

Zde se vzor formátu používá k zobrazení měsíce jako celého čísla a zkratky. Do vzoru formátu můžete přidat literály, například závorky kolem zkratky měsíce: ({month.abbreviated}).

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

Hodnoty datumu

Ovládací prvek pro výběr data má API / DateChanged i API SelectedDate/SelectedDateChanged. Rozdíl mezi těmito spočívá v tom, že Date není nullovatelné, zatímco SelectedDate je nullovatelné.

Hodnota SelectedDate se používá k nastavení výběru data a ve výchozím nastavení je null. Pokud SelectedDate je null, vlastnost Date je nastavena na 31.12.1600; jinak se hodnota Date synchronizuje s hodnotou SelectedDate. Když je SelectedDatenull, výběr je "nenastaven" a zobrazuje názvy polí místo data.

Pomocí vlastností MinYear a MaxYe ar můžete omezit hodnoty kalendářních dat ve výběru. Ve výchozím nastavení MinYear je nastaveno na 100 let před aktuálním datem a MaxYear je nastaveno na 100 let za aktuálním datem.

Pokud nastavíte pouze MinYear nebo MaxYear, musíte zajistit, aby byl platný rozsah kalendářních dat vytvořen datem, které jste nastavili, a výchozí hodnotou druhého data. V opačném případě nebude k dispozici žádné datum, které by bylo možné vybrat ve výběru. Například nastavení pouze yearDatePicker.MaxYear = new DateTimeOffset(new DateTime(900, 1, 1)); vytvoří neplatný rozsah dat s výchozí hodnotou MinYear.

Inicializace datové hodnoty

Vlastnosti data nelze nastavit jako řetězec atributu XAML, protože analyzátor XAML Windows Runtime nemá logiku pro převod řetězců na data jako objekty DateTime / a DateTimeOffset. Tady je několik navrhovaných způsobů, jak lze tyto objekty definovat v kódu a nastavit na jiné datum než aktuální datum.

• DateTime: Vytvoření instance Windows. Globalization.Calendar objekt (inicializuje se na aktuální datum). Nastavením roku nebo voláním addYears upravte datum. Poté zavolejte Calendar.GetDateTime a použijte vrácené DateTime k nastavení vlastnosti data.
• DateTimeOffset: Zavolejte konstruktor. Pro vnitřní System.DateTimepoužijte podpis konstruktoru. Nebo vytvořte výchozí DateTimeOffset (inicializuje se na aktuální datum) a zavolejte AddYears.

Další možnou technikou je definovat datum, které je k dispozici jako datový objekt nebo v kontextu dat, a pak nastavit vlastnost data jako atribut XAML, který odkazuje na {Binding} rozšíření XAML značek, které může přistupovat k datu jako k datům.

Poznámka:

Důležité informace o hodnotách kalendářních dat naleznete v části Hodnoty DateTime a Calendar v článku Ovládací prvky data a času.

Tento příklad ukazuje nastavení SelectedDate, MinYeara MaxYear vlastnosti na různých DatePicker ovládacích prvcích.

<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);
}

Použití hodnot datumu

Chcete-li použít hodnotu data v aplikaci, obvykle používáte datovou vazbu k SelectedDate vlastnost nebo zpracovat SelectedDateChanged událost.

Příklad použití DatePicker a TimePicker k aktualizaci jedné DateTime hodnoty najdete v tématu Ovládací prvky Kalendář, datum a čas – Použití nástroje pro výběr data a výběru času společně.

Zde uživatel může pomocí DatePicker vybrat datum příjezdu. Při zpracování události SelectedDateChanged aktualizujete instanci DateTime s názvem 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;
    }
}

Související články

• Ovládací prvky pro datum a čas
• Výběr data z kalendáře
• zobrazení kalendáře
• Výběr času