Xamarin.Forms DatePicker

Descargar el ejemplo

Vista Xamarin.Forms que permite al usuario seleccionar una fecha.

Xamarin.FormsDatePicker invoca el control de selector de fecha de la plataforma y permite al usuario seleccionar una fecha. DatePicker define ocho propiedades:

• MinimumDate de tipo DateTime, que tiene como valor predeterminado el primer día del año 1900.
• MaximumDate de tipo DateTime, que tiene como valor predeterminado el último día del año 2100.
• Date de tipo DateTime, la fecha seleccionada, que tiene como valor predeterminado el valor DateTime.Today.
• Format de tipo string, una cadena de formato de .NET estándar o personalizada , que tiene como valor predeterminado "D", el patrón de fecha larga.
• TextColor de tipo Color, el color utilizado para mostrar la fecha seleccionada, que tiene Color.Defaultcomo valor predeterminado .
• FontAttributes de tipo FontAttributes, que tiene FontAtributes.Nonecomo valor predeterminado .
• FontFamily de tipo string, que tiene nullcomo valor predeterminado .
• FontSize de tipo double, que tiene como valor predeterminado -1.0.
• CharacterSpacing, del tipo double, es el espaciado entre los caracteres del texto de DatePicker.

DatePicker desencadena un DateSelected evento cuando el usuario selecciona una fecha.

Advertencia

Al establecer MinimumDate y MaximumDate, asegúrese de que siempre sea menor o igual que MaximumDateMinimumDate . De lo contrario, DatePicker generará una excepción.

Internamente, DatePicker garantiza que Date está entre MinimumDate y MaximumDate, ambos incluidos. Si MinimumDate o MaximumDate se establece para que Date no esté entre ellos, DatePicker ajustará el valor de Date.

Las ocho propiedades están respaldadas por BindableProperty objetos, lo que significa que se pueden aplicar estilos y las propiedades pueden ser destinos de enlaces de datos. La Date propiedad tiene un modo de enlace predeterminado de BindingMode.TwoWay, lo que significa que puede ser un destino de un enlace de datos en una aplicación que usa la arquitectura Model-View-ViewModel (MVVM).

Inicialización de las propiedades DateTime

En el código, puede inicializar las MinimumDatepropiedades , MaximumDatey Date en valores de tipo DateTime:

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

Cuando se especifica un DateTime valor en XAML, el analizador XAML usa el DateTime.Parse método con un CultureInfo.InvariantCulture argumento para convertir la cadena en un DateTime valor. Las fechas deben especificarse en un formato preciso: meses de dos dígitos, días de dos dígitos y años de cuatro dígitos separados por barras diagonales:

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

Si la BindingContext propiedad de DatePicker se establece en una instancia de un modelo de vista que contiene propiedades de tipo DateTime denominado MinDate, MaxDatey SelectedDate (por ejemplo), puede crear una instancia de como DatePicker esta:

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

En este ejemplo, las tres propiedades se inicializan en las propiedades correspondientes del modelo de vista. Dado que la Date propiedad tiene un modo de enlace de TwoWay, cualquier fecha nueva que el usuario seleccione se refleje automáticamente en el modelo de vista.

DatePicker Si no contiene un enlace en su Date propiedad, una aplicación debe adjuntar un controlador al DateSelected evento que se informará cuando el usuario seleccione una nueva fecha.

Para obtener información sobre cómo establecer las propiedades de fuente, vea Fuentes.

DatePicker y diseño

Es posible usar una opción de diseño horizontal sin restricciones, como Center, Starto End con DatePicker:

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

Sin embargo, esto no se recomienda. En función del valor de la Format propiedad, las fechas seleccionadas pueden requerir diferentes anchos de presentación. Por ejemplo, la cadena de formato "D" hace DateTime que se muestren fechas en un formato largo y "Miércoles, 12 de septiembre de 2018" requiere un ancho de pantalla mayor que "Viernes, 4 de mayo de 2018". En función de la plataforma, esta diferencia puede hacer que la vista cambie el ancho en el DateTime diseño o que la pantalla se trunquen.

Sugerencia

Es mejor usar la configuración predeterminada HorizontalOptions de Fill con DatePickery no usar un ancho de Auto al colocar DatePicker en una Grid celda.

DatePicker en una aplicación

El ejemplo DaysBetweenDates incluye dos DatePicker vistas en su página. Se pueden usar para seleccionar dos fechas y el programa calcula el número de días entre esas fechas. El programa no cambia la configuración de las MinimumDate propiedades y MaximumDate , por lo que las dos fechas deben estar entre 1900 y 2100.

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

A cada DatePicker uno se le asigna una Format propiedad de "D" para un formato de fecha larga. Observe también que el endDatePicker objeto tiene un enlace que tiene como destino su MinimumDate propiedad. El origen de enlace es la propiedad seleccionada Date del startDatePicker objeto . Esto garantiza que la fecha de finalización siempre sea posterior o igual que la fecha de inicio. Además de los dos DatePicker objetos, se etiqueta " Switch Incluir ambos días en total".

Las dos DatePicker vistas tienen controladores asociados al DateSelected evento y Switch tiene un controlador asociado a su Toggled evento. 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:

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 por primera vez el ejemplo, ambas DatePicker vistas se inicializan en la fecha actual. En la captura de pantalla siguiente se muestra el programa que se ejecuta en iOS y Android:

Al pulsar cualquiera de las DatePicker pantallas, se invoca el selector de fecha de la plataforma. Las plataformas implementan este selector de fechas de maneras muy diferentes, pero cada enfoque es familiar para los usuarios de esa plataforma:

Sugerencia

En Android, el DatePicker cuadro de diálogo se puede personalizar reemplazando el CreateDatePickerDialog método en un representador personalizado. Esto permite, por ejemplo, agregar botones adicionales al cuadro de diálogo.

Una vez seleccionadas dos fechas, la aplicación muestra el número de días entre esas fechas:

Vínculos relacionados

• Ejemplo DaysBetweenDates
• DatePicker API