Xamarin.Forms DatePickerXamarin.Forms DatePicker

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Una vista de Xamarin.Forms que permite al usuario seleccionar una fecha.A Xamarin.Forms view that allows the user to select a date.

Xamarin.Forms DatePicker invoca el control de selector de fecha de la plataforma y permite al usuario seleccionar una fecha.The Xamarin.Forms DatePicker invokes the platform's date-picker control and allows the user to select a date. DatePicker define las propiedades de ocho:DatePicker defines eight properties:

El DatePicker se activa un DateSelected eventos cuando el usuario selecciona una fecha.The DatePicker fires a DateSelected event when the user selects a date.

Advertencia

Al establecer MinimumDate y MaximumDate, asegúrese de que MinimumDate siempre es menor o igual que MaximumDate.When setting MinimumDate and MaximumDate, make sure that MinimumDate is always less than or equal to MaximumDate. En caso contrario, DatePicker , se producirá una excepción.Otherwise, DatePicker will raise an exception.

Internamente, el DatePicker garantiza que Date entre MinimumDate y MaximumDate, ambos inclusive.Internally, the DatePicker ensures that Date is between MinimumDate and MaximumDate, inclusive. Si MinimumDate o MaximumDate se establece para que Date no está entre ellos, DatePicker ajustará el valor de Date.If MinimumDate or MaximumDate is set so that Date is not between them, DatePicker will adjust the value of Date.

Todas las propiedades de ocho están respaldadas por BindableProperty objetos, lo que significa que puede cambiar el estilo y las propiedades pueden ser destinos de enlaces de datos.All eight properties are backed by BindableProperty objects, which means that they can be styled, and the properties can be targets of data bindings. El Date propiedad tiene un modo de enlace predeterminada de BindingMode.TwoWay , lo que significa que puede ser un destino de enlace de datos en una aplicación que utiliza el Model-View-ViewModel (MVVM) arquitectura.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.

Inicializando las propiedades de fecha y horaInitializing the DateTime properties

En el código, se puede inicializar el MinimumDate, MaximumDate, y Date propiedades en valores de tipo 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)
};

Cuando un DateTime se expresa en XAML, el analizador XAML usa la DateTime.Parse método con un CultureInfo.InvariantCulture argumento para convertir la cadena en un DateTime valor.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. Se deben especificar las fechas en un formato preciso: dos dígitos meses, días de dos dígitos y años de cuatro dígitos separados por barras diagonales: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" />

Si la propiedad BindingContext de DatePicker está establecida en una instancia de un ViewModel que contiene propiedades de tipo DateTime denominadas MinDate, MaxDatey SelectedDate (por ejemplo,), puede crear una instancia del DatePicker como se indica a continuación: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}" />

En este ejemplo, las tres propiedades se inicializan en las propiedades correspondientes del ViewModel.In this example, all three properties are initialized to the corresponding properties in the viewmodel. Dado que la propiedad Date tiene un modo de enlace de TwoWay, cualquier fecha nueva que seleccione el usuario se reflejará automáticamente en el ViewModel.Because the Date property has a binding mode of TwoWay, any new date that the user selects is automatically reflected in the viewmodel.

Si el DatePicker no contiene un enlace en su Date propiedad, una aplicación debe adjuntar un controlador para el DateSelected evento para ser informado cuando el usuario selecciona una nueva fecha.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.

Para obtener información sobre cómo establecer las propiedades de fuente, consulte fuentes.For information about setting font properties, see Fonts.

DatePicker y diseñoDatePicker and layout

Es posible usar una opción de diseño horizontal sin restricciones, como Center, Start, o End con DatePicker:It's possible to use an unconstrained horizontal layout option such as Center, Start, or End with DatePicker:

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

Sin embargo, esto no se recomienda.However, this is not recommended. Según la configuración de la Format propiedad, selecciona las fechas pueden requerir los anchos de pantalla diferente.Depending on the setting of the Format property, selected dates might require different display widths. Por ejemplo, hace que la cadena de formato "D" DateTime mostrar las fechas en un formato largo y "Miércoles, 12 de septiembre de 2018" requiere un mayor ancho de pantalla que "Viernes, 4 de mayo de 2018".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". Según la plataforma, esta diferencia puede provocar la DateTime vista para cambiar el ancho de diseño o en la presentación se trunque.Depending on the platform, this difference might cause the DateTime view to change width in layout, or for the display to be truncated.

Sugerencia

Es mejor usar el valor predeterminado HorizontalOptions de Fill con DatePickery no se debe utilizar un ancho de Auto al poner DatePicker en un Grid celda.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 en una aplicaciónDatePicker in an application

El DaysBetweenDates ejemplo incluye dos DatePicker vistas en su página.The DaysBetweenDates sample includes two DatePicker views on its page. Se pueden usar para seleccionar dos fechas, y el sistema calcula el número de días entre esas fechas.These can be used to select two dates, and the program calculates the number of days between those dates. El programa no cambia la configuración de la MinimumDate y MaximumDate propiedades, por lo que las dos fechas deben estar entre 1900 y 2100.The program doesn't change the settings of the MinimumDate and MaximumDate properties, so the two dates must be between 1900 and 2100.

Este es el archivo XAML: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>

Cada DatePicker se asigna un Format propiedad de "D" para un formato de fecha larga.Each DatePicker is assigned a Format property of "D" for a long date format. Observe también que el endDatePicker objeto tiene un enlace que tenga como destino su MinimumDate propiedad.Notice also that the endDatePicker object has a binding that targets its MinimumDate property. El origen de enlace está seleccionado Date propiedad de la startDatePicker objeto.The binding source is the selected Date property of the startDatePicker object. Esto garantiza que la fecha de finalización es siempre posterior o igual que la fecha de inicio.This ensures that the end date is always later than or equal to the start date. Además de los dos DatePicker objetos, un Switch tiene la etiqueta "Incluyen dos días en total".In addition to the two DatePicker objects, a Switch is labeled "Include both days in total".

Los dos DatePicker las vistas tienen controladores asociados a la DateSelected eventos y el Switch ha adjuntado un controlador a su Toggled eventos.The two DatePicker views have handlers attached to the DateSelected event, and the Switch has a handler attached to its Toggled event. Estos controladores de eventos están en el archivo de código subyacente y desencadenan un nuevo cálculo de los días entre las dos fechas: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");
    }
}

Cuando se ejecuta el ejemplo primero, ambos DatePicker vistas se inicializan en la fecha de hoy.When the sample is first run, both DatePicker views are initialized to today's date. En la captura de pantalla siguiente se muestra el programa que se ejecuta en iOS y Android:The following screenshot shows the program running on iOS and Android:

Días entre las fechas de inicioDays Between Dates Start

Al puntear en cualquiera de los DatePicker muestra invoca el selector de fecha de la plataforma.Tapping either of the DatePicker displays invokes the platform date picker. Las plataformas de implementan este selector de fecha de maneras muy diferentes, pero cada enfoque es familiar para los usuarios de esa plataforma:The platforms implement this date picker in very different ways, but each approach is familiar to users of that platform:

Días entre las fechas seleccioneDays Between Dates Select

Sugerencia

En Android, el DatePicker cuadro de diálogo se puede personalizar invalidando el CreateDatePickerDialog método en un representador personalizado.On Android, the DatePicker dialog can be customized by overriding the CreateDatePickerDialog method in a custom renderer. Esto permite, por ejemplo, botones adicionales que se agregan al cuadro de diálogo.This allows, for example, additional buttons to be added to the dialog.

Una vez seleccionadas las dos fechas, la aplicación muestra el número de días entre esas fechas:After two dates are selected, the application displays the number of days between those dates:

Resultados de días entre fechasDays Between Dates Result