Sdílet prostřednictvím

Ovládací prvky kalendář, datum a čas

Ovládací prvky data a času poskytují standardní lokalizované způsoby, jak umožnit uživateli zobrazit a nastavit hodnoty data a času v aplikaci. Tento článek obsahuje pokyny k návrhu a pomůže vám vybrat správný ovládací prvek.

Otevření aplikace Galerie WinUI 3 a zobrazení ovládacích prvků Datum a čas v akci

Ikona galerie WinUI 3 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.

Jaký ovládací prvek data nebo času byste měli použít?

Existují čtyři ovládací prvky data a času, ze které si můžete vybrat; ovládací prvek, který použijete, závisí na vašem scénáři. Tyto informace slouží k výběru správného ovládacího prvku pro použití v aplikaci.

Řízení Example Description
Zobrazení kalendáře Příklad zobrazení kalendáře Slouží k výběru jednoho data nebo rozsahu kalendářních dat z vždy viditelného kalendáře.
Výběr data v kalendáři Snímek obrazovky s výběrem data kalendáře Slouží k výběru jednoho data z kontextového kalendáře.
Kalendářní výběr Příklad výběru data Slouží k výběru jednoho známého data, když kontextové informace nejsou důležité.
Výběr času Příklad výběru času Slouží k výběru jedné časové hodnoty.

Zobrazení kalendáře

CalendarView umožňuje uživateli zobrazit a pracovat s kalendářem, který může procházet podle měsíce, roku nebo desetiletí. Uživatel může vybrat jedno datum nebo rozsah kalendářních dat. Nemá výběrovou plochu a kalendář je vždy viditelný.

Zobrazení kalendáře se skládá ze 3 samostatných zobrazení: zobrazení měsíce, zobrazení roku a desetiletí. Ve výchozím nastavení začíná otevřeným zobrazením měsíce, ale jako spouštěcí zobrazení můžete zadat libovolné zobrazení.

Snímek obrazovky se třemi zobrazeními kalendáře se zobrazením měsíce, zobrazením roku a zobrazením desetiletí

  • Pokud potřebujete uživateli povolit výběr více kalendářních dat, musíte použít CalendarView.
  • Pokud potřebujete, aby uživatel vybral pouze jedno datum a nevyžadujete, aby byl kalendář stále viditelný, zvažte použití ovládacího prvku CalendarDatePicker nebo DatePicker.

Výběr data v kalendáři

CalendarDatePicker je rozevírací ovládací prvek, který je optimalizovaný pro výběr jednoho data ze zobrazení kalendáře, kde jsou důležité kontextové informace, jako je den v týdnu nebo plná dostupnost kalendáře. Kalendář můžete upravit tak, aby poskytoval další kontext nebo omezil dostupná data.

Vstupní bod zobrazí zástupný text, pokud není nastaveno datum; v opačném případě zobrazí zvolené datum. Když uživatel vybere vstupní bod, rozbalí se zobrazení kalendáře, aby uživatel vybral datum. Zobrazení kalendáře překrývá jiné uživatelské rozhraní; neposouvá je pryč.

Snímek obrazovky ukazuje prazdné textové pole pro výběr data, které je poté vyplněno, a pod ním je kalendář.

  • Výběr data kalendáře můžete použít pro věci, jako je volba události nebo data odjezdu.

Kalendářní výběr

Ovládací prvek DatePicker poskytuje standardizovaný způsob, jak zvolit konkrétní datum.

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

Příklad rozšíření rozbalovacího výběru data

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

Výběr času

TimePicker slouží k výběru jedné hodnoty času pro věci, jako jsou události nebo čas odletu. Jedná se o statické zobrazení nastavené uživatelem nebo v kódu, ale neaktualizuje se tak, aby zobrazoval aktuální čas.

Vstupní bod zobrazí zvolený čas a když uživatel vybere vstupní bod, výběrové rozhraní se vertikálně rozšíří ze středu, aby uživatel mohl provést výběr. Výběr času překrývá jiné uživatelské rozhraní; nevytlačuje jiné uživatelské rozhraní z cesty.

Příklad rozbalení výběru času

  • Pomocí nástroje pro výběr času umožníte uživateli vybrat jednu časovou hodnotu.

Vytvořte ovládací prvek pro datum nebo čas

Informace a příklady specifické pro jednotlivé ovládací prvky data a času najdete v těchto článcích.

Použití nástroje pro výběr data a výběru času společně

Tento příklad ukazuje, jak pomocí DatePicker a TimePicker společně umožnit uživateli vybrat datum a čas příjezdu. Zpracováváte SelectedDateChanged a SelectedTimeChanged události, abyste aktualizovali jednu instanci DateTime s názvem arrivalDateTime. Uživatel může také vymazat výběr data a času po nastavení.

Výběr data, výběr času, tlačítko a textový popisek 

<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

Ovládací prvky data XAML podporují všechny kalendářní systémy podporované systémem Windows. Tyto kalendáře jsou zadány ve Třídě Windows.Globalization.CalendarIdentifiers . Každý ovládací prvek používá správný kalendář pro výchozí jazyk vaší aplikace nebo můžete nastavit vlastnost CalendarIdentifier tak, aby používala určitý systém kalendářů.

Ovládací prvek pro výběr času podporuje každý z hodinových systémů zadaných ve třídě Windows.Globalization.ClockIdentifiers . Vlastnost ClockIdentifier můžete nastavit tak, aby používala 12hodinový nebo 24hodinový formát. Typ vlastnosti je String, ale musíte použít hodnoty, které odpovídají statickým řetězcovým vlastnostem třídy ClockIdentifiers. Toto jsou: TwelveHour (řetězec "12HourClock") a TwentyFourHour (řetězec "24HourClock"). "12HourClock" je výchozí hodnota.

Hodnoty DateTime a Calendar

Objekty data použité v ovládacích prvcích data a času XAML mají v závislosti na programovacím jazyce jinou reprezentaci.

Související koncept je třída Kalendáře, která ovlivňuje způsob interpretace kalendářních dat v kontextu. Všechny Windows Runtime aplikace můžou používat třídu Windows.Globalization.Calendar. Aplikace C# a Visual Basic můžou alternativně používat třídu System.Globalization.Calendar, která má velmi podobné funkce. (Windows Runtime aplikace můžou používat základní třídu .NET Calendar, ale ne konkrétní implementace, například GregorianCalendar.)

.NET také podporuje typ s názvem DateTime, který se implicitně konvertibilní na DateTimeOffset. V .NET kódu se můžete setkat s tím, že se pro nastavení hodnot používá typ "DateTime", ačkoli by mělo jít o DateTimeOffset. Další informace o rozdílu mezi DateTime a DateTimeOffset naleznete v poznámkách ve třídě DateTimeOffset .

Poznámka:

Vlastnosti, které přebírají objekty data, nelze nastavit jako řetězec atributu XAML, protože u analyzátoru XAML Windows Runtime chybí logika pro převod řetězců na data jako objekty DateTime/DateTimeOffset. Tyto hodnoty obvykle nastavíte v kódu. Další možnou technikou je definovat datum, které je k dispozici jako objekt dat nebo v kontextu dat, a poté nastavit vlastnost jako atribut XAML, který odkazuje na {Binding} značkovacího rozšíření výraz, který může přistupovat k datu jako k datu.

Získání ukázkového kódu

Pro vývojáře (XAML)

  • Last updated on