Compartir a través de

Controles de calendario, fecha y hora

Los controles de fecha y hora proporcionan formas estándar y localizadas de permitir que un usuario vea y establezca valores de fecha y hora en la aplicación. En este artículo se proporcionan instrucciones de diseño y le ayuda a elegir el control correcto.

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

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtén la aplicación desde la Microsoft Store o consigue el código fuente en GitHub

¿Qué control de fecha o hora debe usar?

Hay cuatro controles de fecha y hora entre los que elegir; el control que usa depende de su escenario. Usa esta información para elegir el control correcto que se usará en tu aplicación.

Supervisión Example Description
Vista Calendario Ejemplo de vista de calendario Use para elegir una sola fecha o un intervalo de fechas de un calendario siempre visible.
Selector de fecha del calendario Captura de pantalla de un selector de fechas de calendario. Use para elegir una sola fecha de un calendario contextual.
Selector de fecha Ejemplo de selector de fecha Use para elegir una única fecha conocida cuando la información contextual no es importante.
Selector de hora Ejemplo de selector de hora Use para elegir un valor de hora único.

Vista Calendario

CalendarView permite a un usuario ver e interactuar con un calendario que puede navegar por mes, año o década. Un usuario puede seleccionar una sola fecha o un intervalo de fechas. No tiene una superficie de selector y el calendario siempre está visible.

La vista de calendario se compone de 3 vistas independientes: la vista de mes, la vista de año y la vista de década. De forma predeterminada, comienza con la vista de mes abierta, pero puede especificar cualquier vista como vista de inicio.

Captura de pantalla de tres vistas de calendario que muestran una vista de mes, una vista año y una vista de década.

  • Si necesita permitir que un usuario seleccione varias fechas, debe usar calendarView.
  • Si necesita permitir que un usuario elija solo una fecha y no necesite que un calendario esté siempre visible, considere la posibilidad de usar un control CalendarDatePicker o DatePicker .

Selector de fecha del calendario

CalendarDatePicker es un control desplegable que está optimizado para seleccionar una sola fecha de una vista de calendario en la que es importante información contextual como el día de la semana o la totalidad del calendario. Puede modificar el calendario para proporcionar contexto adicional o limitar las fechas disponibles.

El punto de entrada muestra el 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, una vista de calendario se expande para que el usuario realice una selección de fecha. La vista de calendario superpone otra interfaz de usuario; no inserta otra interfaz de usuario fuera del camino.

Captura de pantalla de un selector de fecha de calendario que muestra un cuadro de texto de selección vacío y, a continuación, uno rellenado con un calendario debajo de él.

  • Use un selector de fechas de calendario para cosas como elegir una cita o una fecha de salida.

Selector de fecha

El control DatePicker proporciona una manera estandarizada de elegir una fecha específica.

El punto de entrada muestra la fecha elegida y, cuando el usuario selecciona el punto de entrada, una superficie del selector se expande verticalmente desde el centro para que el usuario realice una selección. El selector de fechas superpone otra interfaz de usuario; no inserta otra interfaz de usuario fuera del camino.

Ejemplo de la expansión del selector de fechas

  • Use un selector de fechas para permitir que un usuario elija una fecha conocida, como una fecha de nacimiento, donde el contexto del calendario no es importante.

Selector de hora

TimePicker se usa para seleccionar un único valor de hora para cosas como citas o una hora de salida. Es una pantalla estática que establece el usuario o en el código, pero no se actualiza para mostrar la hora actual.

El punto de entrada muestra la hora elegida y, cuando el usuario selecciona el punto de entrada, una superficie del selector se expande verticalmente desde el centro para que el usuario realice una selección. El selector de hora superpone otra interfaz de usuario; no inserta otra interfaz de usuario fuera del camino.

Ejemplo de la expansión del selector de hora

  • Use un selector de hora para permitir que un usuario elija un solo valor de hora.

Crear un control de fecha u hora

Consulte estos artículos para obtener información y ejemplos específicos de cada control de fecha y hora.

Usar un selector de fecha y un selector de hora juntos

En este ejemplo se muestra cómo usar y DatePickerTimePicker juntos para permitir que un usuario seleccione su fecha y hora de llegada. Controla los SelectedDateChanged eventos y SelectedTimeChanged para actualizar una única instancia de DateTime denominada arrivalDateTime. El usuario también puede borrar los selectores de fecha y hora después de que se hayan establecido.

Selector de fecha, selector de hora, botón y etiqueta de texto. 

<StackPanel>
    <DatePicker x:Name="arrivalDatePicker" Header="Arrival date"
                DayFormat="{}{day.integer} ({dayofweek.abbreviated})"
                SelectedDateChanged="ArrivalDatePicker_SelectedDateChanged"/>
    <StackPanel Orientation="Horizontal">
        <TimePicker x:Name="arrivalTimePicker" Header="Arrival time"
                MinuteIncrement="15"
                SelectedTimeChanged="ArrivalTimePicker_SelectedTimeChanged"/>
        <Button Content="Clear" Click="ClearDateButton_Click"
                VerticalAlignment="Bottom" Height="30" Width="54"/>
    </StackPanel>
    <TextBlock x:Name="arrivalText" Margin="0,12"/>
</StackPanel>

public sealed partial class MainPage : Page
{
    DateTime arrivalDateTime;

    public MainPage()
    {
        this.InitializeComponent();

        // Set minimum to the current year and maximum to five years from now.
        arrivalDatePicker.MinYear = DateTimeOffset.Now;
        arrivalDatePicker.MaxYear = DateTimeOffset.Now.AddYears(5);
    }

    private void ArrivalTimePicker_SelectedTimeChanged(TimePicker sender, TimePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalTimePicker.SelectedTime != null)
        {
            arrivalDateTime = new DateTime(arrivalDateTime.Year, arrivalDateTime.Month, arrivalDateTime.Day,
                                           args.NewTime.Value.Hours, args.NewTime.Value.Minutes, args.NewTime.Value.Seconds);
        }
        arrivalText.Text = arrivalDateTime.ToString();
    }

    private void ArrivalDatePicker_SelectedDateChanged(DatePicker sender, DatePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalDatePicker.SelectedDate != null)
        {
            if (VerifyDateIsFuture((DateTimeOffset)arrivalDatePicker.SelectedDate) == true)
            {
                arrivalDateTime = new DateTime(args.NewDate.Value.Year, args.NewDate.Value.Month, args.NewDate.Value.Day,
                                               arrivalDateTime.Hour, arrivalDateTime.Minute, arrivalDateTime.Second);
                arrivalText.Text = arrivalDateTime.ToString();
            }
            else
            {
                arrivalDatePicker.SelectedDate = null;
                arrivalText.Text = "Arrival date must be later than today.";
            }
        }
    }

    private bool VerifyDateIsFuture(DateTimeOffset date)
    {
        if (date > DateTimeOffset.Now)
        {
            return true;
        }
        return false;
    }

    private void ClearDateButton_Click(object sender, RoutedEventArgs e)
    {
        arrivalDateTime = new DateTime();
        arrivalDatePicker.SelectedDate = null;
        arrivalTimePicker.SelectedTime = null;
        arrivalText.Text = string.Empty;
    }
}

Globalización

Los controles de fecha XAML admiten cada uno de los sistemas de calendario compatibles con Windows. Estos calendarios se especifican en la clase Windows.Globalization.CalendarIdentifiers . Cada control usa el calendario correcto para el idioma predeterminado de la aplicación o puedes establecer la propiedad CalendarIdentifier para usar un sistema de calendario específico.

El control de selector de hora admite cada uno de los sistemas de reloj especificados en la clase Windows.Globalization.ClockIdentifiers . Puede establecer la propiedad ClockIdentifier para usar un reloj de 12 horas o un reloj de 24 horas. El tipo de la propiedad es String, pero debe usar valores que corresponden a las propiedades de cadena estáticas de la clase ClockIdentifiers. Estos son: DoceHour (la cadena "12HourClock")y TwentyFourHour (la cadena "24HourClock"). "12HourClock" es el valor predeterminado.

Valores de DateTime y Calendar

Los objetos date usados en los controles de fecha y hora XAML tienen una representación diferente en función del lenguaje de programación.

Un concepto relacionado es la clase Calendar, que influye en cómo se interpretan las fechas en el contexto. Todas las aplicaciones de Windows Runtime pueden usar la clase Windows.Globalization.Calendar . Las aplicaciones de C# y Visual Basic también pueden usar la clase System.Globalization.Calendar , que tiene una funcionalidad muy similar. (Las aplicaciones de Windows Runtime pueden usar la clase Calendar de .NET base, pero no las implementaciones específicas; por ejemplo, GregorianCalendar).

.NET también admite un tipo denominado DateTime, que se puede convertir implícitamente en dateTimeOffset. Por lo tanto, es posible que vea un tipo "DateTime" que se usa en el código .NET que se usa para establecer valores que realmente son DateTimeOffset. Para obtener más información sobre la diferencia entre DateTime y DateTimeOffset, consulta Comentarios en la clase DateTimeOffset .

Nota:

Las propiedades que toman objetos date no se pueden establecer como una cadena de atributo XAML, ya que el analizador XAML de Windows Runtime no tiene una lógica de conversión para convertir cadenas en fechas como objetos DateTime/DateTimeOffset. Normalmente, estos valores se establecen en el código. Otra técnica posible consiste en definir una fecha que esté disponible como un objeto de datos o en el contexto de datos y, a continuación, establecer la propiedad como un atributo XAML que haga referencia a una expresión de extensión de marcado {Binding} que pueda tener acceso a la fecha como datos.

Obtención del código de ejemplo

Para desarrolladores (XAML)

  • Last updated on