Xamarin.FormsDatePicker DatePicker

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Eine Xamarin.Forms Ansicht, mit der der Benutzer ein Datum auswählen kann.A Xamarin.Forms view that allows the user to select a date.

Xamarin.Forms DatePicker Ruft das Steuerelement für die Datumsauswahl der Plattform auf und ermöglicht es dem Benutzer, ein Datum auszuwählen.The Xamarin.Forms DatePicker invokes the platform's date-picker control and allows the user to select a date. DatePickerdefiniert acht Eigenschaften:DatePicker defines eight properties:

Das löst ein-Ereignis aus, DatePicker DateSelected Wenn der Benutzer ein Datum auswählt.The DatePicker fires a DateSelected event when the user selects a date.

Warnung

Wenn MinimumDate Sie und festlegen MaximumDate , stellen Sie sicher, dass MinimumDate immer kleiner oder gleich ist MaximumDate .When setting MinimumDate and MaximumDate, make sure that MinimumDate is always less than or equal to MaximumDate. Andernfalls DatePicker wird von eine Ausnahme ausgelöst.Otherwise, DatePicker will raise an exception.

Intern DatePicker stellt sicher, dass Date zwischen und (einschließlich) liegt MinimumDate MaximumDate .Internally, the DatePicker ensures that Date is between MinimumDate and MaximumDate, inclusive. Wenn MinimumDate oder MaximumDate festgelegt ist, sodass Date nicht dazwischen liegt, DatePicker wird der Wert von angepasst Date .If MinimumDate or MaximumDate is set so that Date is not between them, DatePicker will adjust the value of Date.

Alle acht Eigenschaften werden von Objekten unterstützt BindableProperty . Dies bedeutet, dass Sie formatiert werden können, und die Eigenschaften können Ziele von Daten Bindungen sein.All eight properties are backed by BindableProperty objects, which means that they can be styled, and the properties can be targets of data bindings. Die- Date Eigenschaft verfügt über einen Standard Bindungs Modus von BindingMode.TwoWay . Dies bedeutet, dass Sie ein Ziel einer Datenbindung in einer Anwendung sein kann, die die Model-View-ViewModel (MVVM)- Architektur verwendet.The Date property has a default binding mode of BindingMode.TwoWay, which means that it can be a target of a data binding in an application that uses the Model-View-ViewModel (MVVM) architecture.

Initialisieren der DateTime-EigenschaftenInitializing the DateTime properties

Im Code können Sie die MinimumDate MaximumDate Eigenschaften, und Date mit Werten des Typs initialisieren DateTime :In code, you can initialize the MinimumDate, MaximumDate, and Date properties to values of type DateTime:

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

Wenn ein DateTime Wert in XAML angegeben wird, verwendet der XAML-Parser die- DateTime.Parse Methode mit einem- CultureInfo.InvariantCulture Argument, um die Zeichenfolge in einen-Wert zu konvertieren DateTime .When a DateTime value is specified in XAML, the XAML parser uses the DateTime.Parse method with a CultureInfo.InvariantCulture argument to convert the string to a DateTime value. Die Datumsangaben müssen in einem präzisen Format angegeben werden: zweistellige Monate, zweistellige Tage und vierstellige Jahre, die durch Schrägstriche voneinander getrennt sind:The dates must be specified in a precise format: two-digit months, two-digit days, and four-digit years separated by slashes:

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

Wenn die- BindingContext Eigenschaft von DatePicker auf eine Instanz von ViewModel festgelegt wird, die Eigenschaften des Typs mit dem DateTime Namen, und enthält (z. b. MinDate MaxDate SelectedDate ), können Sie das wie folgt instanziieren DatePicker :If the BindingContext property of DatePicker is set to an instance of a viewmodel containing properties of type DateTime named MinDate, MaxDate, and SelectedDate (for example), you can instantiate the DatePicker like this:

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

In diesem Beispiel werden alle drei Eigenschaften mit den entsprechenden Eigenschaften in "ViewModel" initialisiert.In this example, all three properties are initialized to the corresponding properties in the viewmodel. Da die- Date Eigenschaft den Bindungs Modus hat TwoWay , werden alle neuen Datumsangaben, die der Benutzer auswählt, automatisch im ViewModel reflektiert.Because the Date property has a binding mode of TwoWay, any new date that the user selects is automatically reflected in the viewmodel.

Wenn das DatePicker keine Bindung für seine-Eigenschaft enthält Date , sollte eine Anwendung einen Handler an das-Ereignis anfügen, DateSelected um informiert zu werden, wenn der Benutzer ein neues Datum auswählt.If the DatePicker does not contain a binding on its Date property, an application should attach a handler to the DateSelected event to be informed when the user selects a new date.

Weitere Informationen zum Festlegen von Schriftart Eigenschaften finden Sie unter Schriftarten.For information about setting font properties, see Fonts.

DatePicker und LayoutDatePicker and layout

Es ist möglich, eine nicht eingeschränkte horizontale Layoutoption wie Center , Start oder End mit zu verwenden DatePicker :It's possible to use an unconstrained horizontal layout option such as Center, Start, or End with DatePicker:

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

Dies wird jedoch nicht empfohlen.However, this is not recommended. Abhängig von der Einstellung der Format Eigenschaft werden für ausgewählte Datumsangaben möglicherweise unterschiedliche Anzeige breiten benötigt.Depending on the setting of the Format property, selected dates might require different display widths. Die Format Zeichenfolge "D" bewirkt z DateTime . b., dass Datumsangaben in einem langen Format angezeigt werden und "Mittwoch, der 12. September 2018" eine höhere Anzeigebreite als "Freitag, 4. Mai 2018" erfordert.For example, the "D" format string causes DateTime to display dates in a long format, and "Wednesday, September 12, 2018" requires a greater display width than "Friday, May 4, 2018". Abhängig von der Plattform kann dieser Unterschied bewirken, DateTime dass die Ansicht die Breite im Layout ändert oder die Anzeige abgeschnitten wird.Depending on the platform, this difference might cause the DateTime view to change width in layout, or for the display to be truncated.

Tipp

Es empfiehlt sich, die Standard HorizontalOptions Einstellung von mit zu verwenden Fill DatePicker und keine Breite von Auto beim Einfügen DatePicker in eine Zelle zu verwenden Grid .It's best to use the default HorizontalOptions setting of Fill with DatePicker, and not to use a width of Auto when putting DatePicker in a Grid cell.

DatePicker in einer AnwendungDatePicker in an application

Das daysbetwetendates -Beispiel enthält zwei DatePicker Ansichten auf der Seite.The DaysBetweenDates sample includes two DatePicker views on its page. Diese können verwendet werden, um zwei Datumsangaben auszuwählen, und das Programm berechnet die Anzahl der Tage zwischen diesen Datumsangaben.These can be used to select two dates, and the program calculates the number of days between those dates. Das Programm ändert nicht die Einstellungen der MinimumDate -Eigenschaft und der-Eigenschaft MaximumDate , sodass die beiden Datumsangaben zwischen 1900 und 2100 liegen müssen.The program doesn't change the settings of the MinimumDate and MaximumDate properties, so the two dates must be between 1900 and 2100.

Hier ist die XAML-Datei:Here's the XAML file:

<?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>

Jedem DatePicker wird die Format Eigenschaft "D" für ein langes Datumsformat zugewiesen.Each DatePicker is assigned a Format property of "D" for a long date format. Beachten Sie auch, dass das- endDatePicker Objekt über eine Bindung verfügt, die auf seine- MinimumDate Eigenschaft abzieltNotice also that the endDatePicker object has a binding that targets its MinimumDate property. Die Bindungs Quelle ist die ausgewählte Date Eigenschaft des startDatePicker Objekts.The binding source is the selected Date property of the startDatePicker object. Dadurch wird sichergestellt, dass das Enddatum immer später oder gleich dem Startdatum ist.This ensures that the end date is always later than or equal to the start date. Zusätzlich zu den beiden- DatePicker Objekten wird eine mit der Switch Bezeichnung "include both days in Total" bezeichnet.In addition to the two DatePicker objects, a Switch is labeled "Include both days in total".

Die beiden DatePicker Ansichten verfügen über Handler, die an das Ereignis angefügt sind DateSelected Switch ToggledThe two DatePicker views have handlers attached to the DateSelected event, and the Switch has a handler attached to its Toggled event. Diese Ereignishandler befinden sich in der Code Behind-Datei und initiieren eine neue Berechnung der Tage zwischen den beiden Datumsangaben:These event handlers are in the code-behind file and trigger a new calculation of the days between the two dates:

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

Wenn das Beispiel zum ersten Mal ausgeführt wird, DatePicker werden beide Sichten mit dem heutigen Datum initialisiert.When the sample is first run, both DatePicker views are initialized to today's date. Der folgende Screenshot zeigt das Programm, das unter IOS und Android ausgeführt wird:The following screenshot shows the program running on iOS and Android:

Tage zwischen DatumsangabenDays Between Dates Start

Wenn Sie auf eines der angezeigten anzeigen tippen, wird DatePicker die Platt Form Datumsauswahl aufgerufenTapping either of the DatePicker displays invokes the platform date picker. Diese Datumsauswahl wird von den Plattformen auf sehr unterschiedliche Weise implementiert, aber die einzelnen Ansätze sind den Benutzern dieser Plattform vertraut:The platforms implement this date picker in very different ways, but each approach is familiar to users of that platform:

Tage zwischen Datumsangaben auswählenDays Between Dates Select

Tipp

Unter Android kann das DatePicker Dialogfeld angepasst werden, indem die- CreateDatePickerDialog Methode in einem benutzerdefinierten Renderer überschrieben wird.On Android, the DatePicker dialog can be customized by overriding the CreateDatePickerDialog method in a custom renderer. Dies ermöglicht z. b. das Hinzufügen zusätzlicher Schaltflächen zum Dialogfeld.This allows, for example, additional buttons to be added to the dialog.

Nachdem zwei Datumsangaben ausgewählt wurden, zeigt die Anwendung die Anzahl der Tage zwischen diesen Datumsangaben an:After two dates are selected, the application displays the number of days between those dates:

Tage zwischen DatumsangabenDays Between Dates Result