Xamarin.Forms DatePicker

  • Článek
  • 5 min ke čtení

Ukázka stažení Stažení ukázky

Zobrazení, které uživateli umožňuje vybrat datum.

Xamarin.FormsDatePicker Vyvolá ovládací prvek pro výběr data platformy a umožní uživateli vybrat datum. DatePicker definuje osm vlastností:

DatePickerVyvolá událost, DateSelected když uživatel vybere datum.

Upozornění

Při nastavování MinimumDate a ověřte MaximumDate , že MinimumDate je vždy menší než nebo rovno MaximumDate . V opačném případě DatePicker vyvolá výjimku.

Interně, DatePicker zajišťuje, že Date je mezi MinimumDate a MaximumDate , včetně. Pokud MinimumDateMaximumDate je nastaveno nebo je nastaveno tak, že Date mezi nimi není, DatePicker upraví se hodnota Date .

Všechny osm vlastností jsou zálohovány BindableProperty objekty, což znamená, že mohou být styly a vlastnosti mohou být cílem datových vazeb. DateVlastnost má výchozí režim vazby Xamarin_Forms Date _BindingMode_TwoWay "data-LINKTYPE =" absolutní cestu ">BindingMode.TwoWay , což znamená, že se může jednat o cíl datové vazby v aplikaci, která používá architekturu .

Inicializace vlastností data a času

V kódu můžete inicializovat MinimumDateMaximumDate vlastnosti, a Date pro hodnoty typu DateTime :

DatePicker datePicker = new DatePicker
{
    MinimumDate = new DateTime(2018, 1, 1),
    MaximumDate = new DateTime(2018, 12, 31),
    Date = new DateTime(2018, 6, 21)
};

Pokud DateTime je v jazyce XAML zadána hodnota, analyzátor XAML použije DateTime.Parse metodu s CultureInfo.InvariantCulture argumentem pro převod řetězce na DateTime hodnotu. Data musí být zadána v přesném formátu: měsíčních číslic, dny dvou číslic a Čtyřciferné letopočty oddělené lomítky:

<DatePicker MinimumDate="01/01/2018"
            MaximumDate="12/31/2018"
            Date="06/21/2018" />

Pokud BindingContextDatePicker je vlastnost nastavena na instanci ViewModel obsahující vlastnosti typu DateTime s názvem MinDate , MaxDate a SelectedDate (například), můžete vytvořit instanci DatePicker takto:

<DatePicker MinimumDate="{Binding MinDate}"
            MaximumDate="{Binding MaxDate}"
            Date="{Binding SelectedDate}" />

V tomto příkladu jsou všechny tři vlastnosti inicializovány na odpovídající vlastnosti v ViewModel. Vzhledem k tomu Date , že vlastnost má režim vazby TwoWay , jakékoli nové datum, které uživatel vybere, se automaticky projeví v ViewModel.

Pokud neobsahuje DatePicker vazbu na svou Date vlastnost, aplikace by měla připojit obslužnou rutinu k DateSelected události, aby se informovala, když uživatel vybere nové datum.

Informace o nastavení vlastností písma naleznete v tématu Fonts.

DatePicker a rozložení

Je možné použít neomezenou možnost horizontálního rozložení Center , jako je, Start nebo EndDatePicker :

<DatePicker ···
            HorizontalOptions="Center"
            ··· />

To se ale nedoporučuje. V závislosti na nastavení Format vlastnosti můžou vybraná data vyžadovat jiné šířky zobrazení. Například řetězec formátu "D" způsobí DateTime zobrazení kalendářních dat v dlouhém formátu a "Středa, 12. září 2018" vyžaduje větší šířku zobrazení než "pátek", 4. května 2018 ". V závislosti na platformě může tento rozdíl způsobit, že DateTime zobrazení změní šířku v rozložení nebo že se zobrazení zkrátí.

Tip

Je nejvhodnější použít výchozí HorizontalOptions nastavení Fill s DatePicker a bez použití šířky Auto při vkládání DatePicker do Grid buňky.

DatePicker v aplikaci

Ukázka DaysBetweenDates obsahuje dvě zobrazení na své stránce. Můžete je použít k výběru dvou kalendářních dat a program vypočítá počet dní mezi těmito daty. Program nemění nastavení MinimumDateMaximumDate vlastností a, takže obě data musí být mezi 1900 a 2100.

Zde je soubor XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DaysBetweenDates"
             x:Class="DaysBetweenDates.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0, 20, 0, 0" />
        </OnPlatform>
    </ContentPage.Padding>

    <StackLayout Margin="10">
        <Label Text="Days Between Dates"
               Style="{DynamicResource TitleStyle}"
               Margin="0, 20"
               HorizontalTextAlignment="Center" />

        <Label Text="Start Date:" />

        <DatePicker x:Name="startDatePicker"
                    Format="D"
                    Margin="30, 0, 0, 30"
                    DateSelected="OnDateSelected" />

        <Label Text="End Date:" />

        <DatePicker x:Name="endDatePicker"
                    MinimumDate="{Binding Source={x:Reference startDatePicker},
                                          Path=Date}"
                    Format="D"
                    Margin="30, 0, 0, 30"
                    DateSelected="OnDateSelected" />

        <StackLayout Orientation="Horizontal"
                     Margin="0, 0, 0, 30">
            <Label Text="Include both days in total: "
                   VerticalOptions="Center" />
            <Switch x:Name="includeSwitch"
                    Toggled="OnSwitchToggled" />
        </StackLayout>

        <Label x:Name="resultLabel"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center" />

    </StackLayout>
</ContentPage>

Každé DatePicker z nich je Format pro formát dlouhého data přiřazena vlastnost "D". Všimněte si také, že endDatePicker objekt má vazbu, která cílí na jeho MinimumDate vlastnost. Zdroj vazby je Date vlastnost vybraná startDatePicker objektu. Tím je zajištěno, že koncové datum bude vždy pozdější než nebo rovno počátečnímu datu. Kromě těchto dvou DatePicker objektů Switch je popisek "zahrnout oba dny v celkovém".

Tato dvě DatePicker zobrazení obsahují obslužné rutiny připojené k DateSelected události a Switch má obslužnou rutinu připojenou ke své Toggled události. Tyto obslužné rutiny událostí jsou v souboru kódu na pozadí a aktivují nový výpočet dnů mezi dvěma kalendářními daty:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    void OnDateSelected(object sender, DateChangedEventArgs args)
    {
        Recalculate();
    }

    void OnSwitchToggled(object sender, ToggledEventArgs args)
    {
        Recalculate();
    }

    void Recalculate()
    {
        TimeSpan timeSpan = endDatePicker.Date - startDatePicker.Date +
            (includeSwitch.IsToggled ? TimeSpan.FromDays(1) : TimeSpan.Zero);

        resultLabel.Text = String.Format("{0} day{1} between dates",
                                            timeSpan.Days, timeSpan.Days == 1 ? "" : "s");
    }
}

Při prvním spuštění ukázky DatePicker jsou obě zobrazení inicializována na dnešní datum. Na následujícím snímku obrazovky vidíte program běžící v iOS a Androidu:

hodnotami dní mezi daty začínajících dny mezi daty

Klepnutím na jedno z těchto DatePicker zobrazení se vyvolá výběr data platformy. Platformy implementují toto výběrové datum velmi různými způsoby, ale každý přístup je známý uživatelům této platformy:

dny mezi daty vybrat

Tip

V Androidu se DatePicker dialog dá přizpůsobit přepsáním CreateDatePickerDialog metody ve vlastním zobrazovacím panelu. To umožňuje například přidání dalších tlačítek do dialogového okna.

Po výběru dvou kalendářních dat aplikace zobrazí počet dní mezi těmito daty:

výsledkem dní mezi dny a datem mezi výsledky dnů daty