Compartir vía

DatePicker

  • Artículo

.NET Multi-platform App UI (.NET MAUI) DatePicker invoca el control de selector de fecha de la plataforma y permite 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 .NET estándar o personalizada, que tiene como valor predeterminado "D", el patrón de fecha larga.
  • TextColor de tipo Color, el color usado para mostrar la fecha seleccionada.
  • FontAttributes de tipo FontAttributes, que tiene FontAtributes.Nonecomo valor predeterminado .
  • FontFamily de tipo string, que tiene null como 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.

Las ocho propiedades están respaldadas por objetos BindableProperty, lo que significa que se les pueden aplicar estilos y que las propiedades pueden ser los destinos de los enlaces de datos. La propiedad Date 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 el patrón Modelo-Vista-Modelo de vista (MVVM).

Advertencia

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

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

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

Crear un DatePicker

Cuando se especifica un valor DateTime en XAML, el analizador XAML usa el método DateTime.Parse con un argumento CultureInfo.InvariantCulture para convertir la cadena en un valor DateTime. 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/2022"
            MaximumDate="12/31/2022"
            Date="06/21/2022" />

Si la propiedad BindingContext de DatePicker se establece en una instancia de un modelo de vista que contiene propiedades de tipo DateTime denominados MinDate, MaxDate y SelectedDate (por ejemplo), puedes crear instancias de DatePicker como 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 propiedad Date tiene un modo de enlace de TwoWay, cualquier fecha nueva que el usuario seleccione se refleja automáticamente en el modelo de vista.

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

En el código, puedes inicializar las propiedades MinimumDate, MaximumDate y Date en un valor 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)
};

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

DatePicker y diseño

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

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

No obstante, esto no se recomienda. En función de la configuración de la propiedad Format, las fechas seleccionadas pueden requerir distintos anchos de presentación. Por ejemplo, la cadena de formato "D" hace que DateTime muestre 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". Dependiendo de la plataforma, esta diferencia puede hacer que la vista DateTime cambie el ancho en el diseño o que la pantalla se trunque.

Sugerencia

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

Localizar un DatePicker en Windows

Para las aplicaciones destinadas a Windows, asegurarte de que el DatePicker muestra las fechas en un formato localizado según la configuración del usuario, incluidos los nombres de los meses y los días en el cuadro de diálogo del selector, requiere una configuración específica en el archivo Package.appxmanifest de tu proyecto. La localización de los elementos del manifiesto del paquete mejora la experiencia del usuario al cumplir las normas culturales de la configuración regional del usuario.

La localización de los formatos de fecha y cadenas en <xref:Microsoft.Maui.Controls.DatePicker> requiere declarar los idiomas compatibles dentro de tu archivo Package.appxmanifest.

Sigue estos pasos para configurar su DatePicker para localización en Windows:

  1. Busca la sección Recursos.

    Navega hasta la carpeta Platforms\Windows de tu proyecto y abra el archivo Package.appxmanifest en un editor de código o en Visual Studio. Si usas Visual Studio, asegúrate de que está viendo el XML sin procesar del archivo. Busca la sección <Resources>, que inicialmente puede incluir:

    <Resources>
    <Resource Language="x-generate" />
</Resources>

  2. Especifica los idiomas admitidos.

    Reemplaza <Resource Language="x-generate"> por <Resource /> elementos de cada uno de los idiomas admitidos. El código de idioma debe estar en forma de etiqueta de idioma BCP-47, como en-US para inglés (Estados Unidos), es-ES para español (España), fr-FR para francés (Francia) o de-DE para alemán (Alemania). Por ejemplo, para agregar compatibilidad con inglés (Estados Unidos) y español (España), la sección <Resources> debe modificarse para que tenga este aspecto:

    <Resources>
    <Resource Language="en-US" />
    <Resource Language="es-ES" />
</Resources>

Esta configuración asegura que el DatePicker mostrará los formatos de fecha, meses y días de acuerdo con la configuración regional del usuario, mejorando significativamente la facilidad de uso de la aplicación y su accesibilidad en diferentes regiones.

Para más información sobre la localización en aplicaciones .NET MAUI, consulte Localización.