Xamarin.Forms DatePicker

  • Artículo
  • 5 minutos para leer

Ejemplo de descarga Descarga del ejemplo

Vista que permite al usuario seleccionar una fecha.

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

el DatePicker activará un DateSelected evento cuando el usuario seleccione una fecha.

Advertencia

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

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

Las ocho propiedades están copiadas por objetos , lo que significa que se pueden crear estilos, y las propiedades pueden ser destinos BindableProperty de enlaces de datos. La propiedad tiene un modo de enlace predeterminado de Date Xamarin_Forms Date _BindingMode_TwoWay" data-linktype="absolute-path">, lo que significa que puede ser un destino de un enlace de datos en una aplicación que usa la arquitectura BindingMode.TwoWay

Inicialización de las propiedades DateTime

En el código, puede inicializar las MinimumDate propiedades , y en valores de tipo MaximumDateDateDateTime :

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 valor en XAML, el analizador XAML usa el método con un argumento para convertir la DateTimeDateTime.Parse cadena en un CultureInfo.InvariantCultureDateTime 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 propiedad de se establece en una instancia de un modelo de vista que contiene propiedades de tipo denominadas , y BindingContextDatePickerDateTimeMinDateMaxDateSelectedDate (por ejemplo), puede crear una instancia de de DatePicker la siguiente forma:

<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 propiedad tiene un modo de enlace de , cualquier nueva fecha que seleccione el usuario se refleja automáticamente Date en el modelo de TwoWay vista.

Si no contiene un enlace en su propiedad, una aplicación debe adjuntar un controlador al evento para que se le informe cuando el usuario selecciona DatePickerDate una nueva DateSelected 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 CenterStart , o con EndDatePicker :

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

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

Sugerencia

Es mejor usar la configuración predeterminada de con y no usar un ancho HorizontalOptions de al colocar en una FillDatePickerAutoDatePickerGrid celda.

DatePicker en una aplicación

El ejemplo DaysBetweenDates incluye dos 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 propiedades y , por lo que las dos fechas deben estar entre MinimumDateMaximumDate 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 DatePicker cada se le asigna una propiedad de Format "D" para un formato de fecha larga. Observe también que el endDatePicker objeto tiene un enlace que tiene como destino su propiedad MinimumDate . El origen de enlace es la Date propiedad seleccionada del objeto startDatePicker . Esto garantiza que la fecha de finalización sea siempre posterior o igual a la fecha de inicio. Además de los dos DatePicker objetos, un Switch objeto tiene la etiqueta "Incluir ambos días en total".

Las dos vistas tienen controladores asociados al evento y tiene DatePicker un controlador asociado a su DateSelectedSwitchToggled 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");
    }
}

La primera vez que se ejecuta el ejemplo, ambas DatePicker vistas se inicializan a la fecha de hoy. En la captura de pantalla siguiente se muestra el programa que se ejecuta en iOS y Android:

entrefechas ydías de inicio entre

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

días entre fechas Seleccionardías entre

Sugerencia

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

Después de seleccionar dos fechas, la aplicación muestra el número de días entre esas fechas:

entre fechas resultado días de resultadodías entre