Selector de fecha del calendario

  • Artículo

El selector de fecha del calendario es un control desplegable que está optimizado para seleccionar una fecha determinada desde una vista de calendario en la que la información contextual es importante, por ejemplo, el día de la semana o el tiempo de calendario transcurrido. Puedes modificar el calendario para que proporcione contexto adicional o para que limite las fechas disponibles.

¿Es este el control adecuado?

Usa un selector de fecha del calendario para permitir al usuario seleccionar una fecha determinada desde una vista de calendario contextual. Úsalo para, por ejemplo, elegir la fecha de una cita o de una salida.

Para permitir que el usuario seleccione una fecha conocida, como una fecha de nacimiento, donde el contexto del calendario no es importante, considera la posibilidad de usar un selector de fecha.

Para obtener más información sobre cómo elegir el control adecuado, consulta el artículo Controles de fecha y hora.

Ejemplos

El punto de entrada muestra texto del marcador de posición si no se ha establecido una fecha; de lo contrario, muestra la fecha elegida. Cuando el usuario selecciona el punto de entrada, se expande una vista de calendario para que el usuario realice una selección de fecha. La vista de calendario se superpone a otra interfaz de usuario; no hace que la otra interfaz desaparezca.

Captura de pantalla de un selector de fecha del calendario que muestra un cuadro de texto seleccionar una fecha vacío y, luego, uno rellenado con un calendario debajo de él.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

Las API de este control existen en el espacio de nombres Windows.UI.Xaml.Controls .

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos y plantillas más actuales para todos los controles. WinUI 2.2 o posterior incluye una nueva plantilla para este control que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.

Crear un selector de fecha de calendario

Abra la aplicación Galería de WinUI 3 y vea CalendarDatePicker en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Calendar"/>

CalendarDatePicker arrivalCalendarDatePicker = new CalendarDatePicker();
arrivalCalendarDatePicker.Header = "Calendar";

El selector de fecha del calendario resultante tiene este aspecto:

Captura de pantalla de un selector de fecha de calendario rellenado con una etiqueta que indica Calendario.

El selector de fecha del calendario tiene un componente CalendarView interno para seleccionar una fecha. Existe en CalendarDatePicker un subconjunto de propiedades CalendarView, como IsTodayHighlighted y FirstDayOfWeek, que se envían al componente CalendarView interno para que puedas modificarlo.

Aun así, no puedes cambiar el SelectionMode del componente CalendarView interno para permitir la selección múltiple. Para permitir al usuario elegir varias fechas o si necesitas un calendario para estar siempre visible, considera la posibilidad de usar una vista de calendario en lugar de un selector de fecha del calendario. Consulta el artículo Vista de calendario para obtener más información sobre cómo puedes modificar la presentación de calendario.

Seleccionar fechas

Usa la propiedad Date para obtener o establecer la fecha seleccionada. De manera predeterminada, la propiedad Date es null. Cuando un usuario selecciona una fecha en la vista de calendario, esta propiedad se actualiza. Un usuario puede borrar la fecha haciendo clic en la fecha seleccionada en la vista de calendario para anular la selección.

Puedes establecer la fecha en el código de la siguiente forma.

myCalendarDatePicker.Date = new DateTime(1977, 1, 5);

Al establecer la propiedad Date en el código, el valor está restringido por las propiedades MinDate y MaxDate.

  • Si Date es menor que MinDate, el valor se establece en MinDate.
  • Si Date es mayor que MaxDate, el valor se establece en MaxDate.

Puedes controlar el evento DateChanged para obtener una notificación cuando el valor Date haya cambiado.

Nota

Para obtener información importante sobre los valores de fecha, consulta Valores de DateTime y Calendar en el artículo Controles de fecha y hora.

Establecer un encabezado y un texto de marcador de posición

Puedes agregar un elemento Header (o etiqueta) y un PlaceholderText (o marca de agua) al selector de fecha del calendario a fin de indicarle al usuario para qué se usa. Para personalizar el aspecto del encabezado, puedes establecer la propiedad HeaderTemplate en lugar de Header.

El texto de marcador de posición predeterminado es "seleccionar una fecha". Puedes quitar esto estableciendo la propiedad PlaceholderText en una cadena vacía, o bien puedes proporcionar texto personalizado como se muestra aquí.

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Arrival date"
                    PlaceholderText="Choose your arrival date"/>

Obtención del código de ejemplo