Selector de hora

El selector de hora le ofrece una manera estandarizada de permitir a los usuarios elegir un valor de hora mediante la entrada táctil, del mouse o del teclado.

Ejemplo de selector de hora

¿Es este el control adecuado?

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

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

Examples

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

Ejemplo de la expansión del selector de hora

Creación de un selector de hora

Icono de la galería de WinUI 3

La aplicación Galería de WinUI 3 incluye ejemplos interactivos de características y controles winUI. Obtenga la aplicación del Microsoft Store o examine el código fuente en GitHub.

En este ejemplo se muestra cómo crear un selector de hora sencillo con un encabezado.

<TimePicker x:Name="arrivalTimePicker" Header="Arrival time"/>

TimePicker arrivalTimePicker = new TimePicker();
arrivalTimePicker.Header = "Arrival time";

El selector de hora resultante tiene este aspecto:

Ejemplo de selector de hora

Formato del selector de hora

De manera predeterminada, el selector de hora muestra un reloj de 12 horas con un selector de a. m./p. m. Puede establecer la propiedad ClockIdentifier en "24HourClock" para mostrar en su lugar un reloj de 24 horas.

<TimePicker Header="24HourClock" SelectedTime="18:21" ClockIdentifier="24HourClock"/>

Un selector de hora de 24 horas.

Puede establecer la propiedad MinuteIncrement para indicar los incrementos de tiempo que se muestran en el selector de minutos. Por ejemplo, 15 especifica que el control de minutos solo muestre las opciones 00, 15, 30, 45.

<TimePicker MinuteIncrement="15"/>

Selector de hora que muestra incrementos de 15 minutos.

Valores de tiempo

El control del selector de hora tiene las API TimeTimeChanged y SelectedTimeSelectedTimeChanged. La diferencia entre ellas es que no acepta valores NULL, mientras que admite valores NULL.

El valor de se usa para rellenar el selector de hora, y es de manera predeterminada. Si es , la propiedad se establece en una estructura TimeSpan de 0; de lo contrario, el valor se sincroniza con el valor . Cuando es , el selector se "desconfigura" y muestra los nombres de campo en lugar de una hora.

Selector de tiempo sin hora seleccionada.

Inicializar un valor de tiempo

En el código, puede inicializar las propiedades de hora en un valor de tipo :

TimePicker timePicker = new TimePicker
{
    SelectedTime = new TimeSpan(14, 15, 00) // Seconds are ignored.
};

Puede establecer el valor de hora como atributo en XAML. Probablemente esto sea más fácil si ya declara el objeto en XAML y no usa enlaces para el valor de hora. Use una cadena con el formato Hh:Mm, donde Hh son las horas y puede estar entre 0 y 23, y Mm son los minutos y puede estar entre 0 y 59.

<TimePicker SelectedTime="14:15"/>

Uso de los valores temporales

Para usar el valor de hora en la aplicación, normalmente usará un enlace de datos a la propiedad SelectedTime o Time, usará las propiedades de hora directamente en el código o controlará el evento SelectedTimeChanged o TimeChanged.

Para obtener un ejemplo de cómo usar un y un juntos para actualizar un único valor , vea Controles de calendario, fecha y hora - usar un selector de fecha y un selector de hora juntos.

Aquí, se usa la propiedad para comparar la hora seleccionada con la hora actual.

Tenga en cuenta que, dado que la propiedad admite valores NULL, tendrá que convertirla explícitamente en , de esta manera: . Sin embargo, la propiedad se podría usar sin ninguna conversión, de este modo: .

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

<StackPanel>
    <TimePicker x:Name="checkTimePicker"/>
    <Button Content="Check time" Click="{x:Bind CheckTime}"/>
    <TextBlock x:Name="resultText"/>
</StackPanel>

private void CheckTime()
{
    // Using the Time property.
    // DateTime myTime = DateTime.Today + checkTimePicker.Time;
    // Using the SelectedTime property (nullable requires cast to DateTime).
    DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);
    if (DateTime.Now >= myTime)
    {
        resultText.Text = "Your selected time has already past.";
    }
    else
    {
        string hrs = (myTime - DateTime.Now).Hours.ToString();
        string mins = (myTime - DateTime.Now).Minutes.ToString();
        resultText.Text = string.Format("Your selected time is {0} hours, {1} minutes from now.", hrs, mins);
    }
}

Temas relacionados

• Controles de fecha y hora
• Selector de fecha del calendario
• Vista Calendario
• Selector de fecha