Agregar un control TimePicker (HTML)

Artículo
03/04/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Si necesitas que los usuarios seleccionen una hora en la aplicación, como por ejemplo para programar una cita o un aviso, puedes usar un control TimePicker, que forma parte de la biblioteca de Windows para JavaScript. El control TimePicker muestra tres controles: uno para la hora, otro para los minutos y otro a elegir entre AM y PM. Estos controles son fáciles de usar con la compatibilidad táctil. Puedes configurarlos y aplicarles un estilo de varias maneras distintas. (Solo Windows)

Objetivo: Mostrar cómo usar un control TimePicker.

Requisitos previos

En este tema se da por hecho que sabes crear una aplicación de la Tienda Windows básica con JavaScript. Para obtener instrucciones para crear tu primera aplicación, consulta Crear la primera aplicación de la Tienda Windows con JavaScript.

Tiempo para finalizar: 15 minutos.

Instrucciones

1. Crear un control simpleTimePicker

Como sucede con la mayoría de los controles de WinJS, puedes crear un control TimePicker mediante declaración (como un atributo data-win-control en un elemento <div>) o de manera imperativa (como un objeto en un bloque de código JavaScript). Para que el control aparezca, debes llamar a WinJS.UI.processAll. Si usas plantillas de proyecto de Visual Studio para aplicaciones de la Tienda Windows con JavaScript, esto se hace automáticamente en el controlador de eventos activated.

Sigue este proceso para declarar un control TimePicker de manera declarativa:

<!DOCTYPE html>
<html>
<head>
  <title>TimePicker Control Example</title>  
  <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
  <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
  <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    <body>
        <section>
            <h1> TimePicker Example</h1>
                <h3>Add a TimePicker Declaratively</h3>
                <div id="time" data-win-control="WinJS.UI.TimePicker"></div>
                <script type="text/javascript">
                    WinJS.UI.processAll(document.getElementById("time"));
                </script>
        </section>
    </body>
    
</html>

Para crear un control TimePicker de manera imperativa (en el código), haz lo siguiente:

<!DOCTYPE html>
<html>
<head>
  <title>TimePicker Control Example</title>  
  <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
  <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
  <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
   <body>
        <section>
            <h1> TimePicker Example</h1>
                <h3>Add a TimePicker Imperatively</h3>
                <div id="time" ></div>
                <script type="text/javascript">
                    var timeDiv = document.getElementById("time"); 
                    var timePicker = new WinJS.UI.TimePicker(timeDiv);
                </script>
        </section>
    </body>
</html>

Cuando compiles y ejecutes la solución, verás tres controles que muestran la hora actual: uno para la hora, otro para los minutos y otro para AM o PM.

Este es el aspecto que debería tener el TimePicker con el archivo ui-dark.css: Estilo oscuro de TimePicker

Este es el aspecto que debería tener el TimePicker con el archivo ui-light.css: Estilo claro de TimePicker

2. Cambiar la hora predeterminada

Puedes establecer una hora predeterminada de las siguientes maneras:

De manera declarativa

<div data-win-control="WinJS.UI.TimePicker" data-win-options="{current='11:00:00'}"></div>

De manera imperativa

// "time" is the ID of the <div> element
var timeDiv = document.getElementById("time"); 
var timePicker = new WinJS.UI.TimePicker(timeDiv, {current:'11:00:00'});

Puedes aplicar formato a la cadena de hora de todas las maneras que te permita el objeto Date de JavaScript, excepto para los valores UTC. A continuación se muestran algunos ejemplos:

03:20 pm
15:20:00

3. Especificar los incrementos en minutos

Puedes cambiar la manera en que se muestran los minutos en un control de minuto de TimePicker. Para ello, establece la propiedad minuteIncrement. Por ejemplo, el siguiente código provoca que el control de minutos muestre los minutos en múltiplos de 5.

<div data-win-control="WinJS.UI.TimePicker" data-win-options="{minuteIncrement:5}"></div>

4. Cambiar el modo en que se muestran el minuto y la hora

Puedes cambiar el patrón del minuto y la hora. De manera predeterminada, el control TimePicker muestra la hora de 2 dígitos, los minutos con 2 dígitos y un designador para AM/PM en la configuración regional de en-us. Puedes cambiar esto de varias maneras:

Para cambiar el modo en que se muestran los minutos

var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.minutePattern = "{minute.integer(1)}";

Para cambiar el modo en que se muestran la hora


var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.hourPattern = "{hour.integer(1)}";

Para especificar un reloj de 12 horas o uno de 24 horas

var timePicker = WinJS.UI.TimePicker(timeDiv);

//displays a 24-hour clock
timePicker.clock = "24HourClock";

//displays a 12-hour clock, plus "AM" or "PM"
timePicker.clock = "12HourClock";

En la siguiente lista se ofrecen los posibles valores para los patrones que puedes usar en un control TimePicker:

{minute.integer} | {minute.integer(n)}
{hour.integer} | {hour.integer(n)}

5. Deshabilitar un control TimePicker

Puedes deshabilitar un control TimePicker si configuras su propiedad deshabilitada en true. Como resultado, el control está visible pero atenuado y no está disponible para el usuario.

var timePicker = new WinJS.UI.TimePicker(timeDiv);
timePicker.disabled = true;

6. Responder al evento onchange

Puedes usar el evento change para modificar el comportamiento de la aplicación:

timePicker.onchange = hourChangeHandler; 

function hourChangeHandler(event) {
    // Insert code here.
    }

7. Cambiar el aspecto del control TimePicker

Por lo general, para cambiar el aspecto del TimePicker puedes usar estilos CSS

<style id="text/css">
    [class="win-timepicker"] {background-color:LightBlue; }
</style>

y especificar un menú desplegable de TimePicker con una de las siguientes clases CSS:

win-timepicker
win-timepicker-hour
win-timepicker-minute
win-timepicker-ampm

Por ejemplo, puedes cambiar el color del borde del menú desplegable de hora:

.win-timepicker-hour
{
    border: 3px solid rgb(28, 160, 218);
}

Esto hace que el menú desplegable de hora aparezca con un borde azul: Borde azul del TimePicker de hora

Puedes cambiar el color del borde del menú desplegable de período (AM/PM):

.win-timepicker-period
{
    border: 3px solid rgb(28, 160, 218);;
}

Esto hace que el menú desplegable de período aparezca con un borde azul: Borde azul del TimePicker de período

Puedes especificar los tres menús desplegables TimePicker usando la sintaxis de prefijo del selector de atributo CSS (^=), que encuentra cada atributo cuyo nombre empiece por la cadena especificada:

[class^="win-timepicker"] { color:red; }

8. Mostrar y ocultar controles

Puedes especificar si se mostrará un control específico. Para ello, configura su atributo de visualización en none:

.win-timepicker-minute { display:none; }

Si quieres ocultar un control en una sola instancia de un controI TimePicker, debes hacer referencia al identificador del elemento <div> asociado. Por ejemplo, si quieres ocultar los minutos solo para el control TimePicker que se muestra en el elemento <div> que tiene un identificador de "hora", haz lo siguiente:

#time *.win-timepicker-minute { display: none; }

9. Mostrar verticalmente los controles del control TimePicker

Si quieres mostrar los controles de la hora, los minutos y AM/PM verticalmente en lugar de horizontalmente, puedes configurar el atributo CSS display en los controles. También debes configurar display para que se bloquee en el propio DIV.


#time {display:block;}
*[class^="win-timepicker"] { display: block; }

Puedes mostrar los controles verticalmente de manera condicional, como por ejemplo, cuando el ancho de la pantalla se encuentra por debajo de un límite especificado. La siguiente consulta de medios CSS especifica que los controles deben mostrarse verticalmente para todos los anchos hasta 320 píxeles.

@media all and (max-width:320px) {
#time {display:block;}
*[class^="win-timepicker"] { display: block; }
}

10. Uso de seudoclases par aplicar estilos al TimePicker

El TimePicker admite las siguientes seudoclases que puedes usar como selectores para mostrar ciertos estilos cuando el TimePicker esté en determinados estados.

win-timepicker:hover. El usuario coloca el cursor encima del selector, pero no lo activa haciendo clic. Aquí el mouse se mantiene encima del menú desplegable de hora.
win-timepicker:active. El selector está activo después de que el usuario presiona el control para abrir el menú desplegable y antes de haber elegido una opción.
win-timepicker:focus. El selector se resalta para aceptar las entradas de teclado.
win-timepicker:disabled. El selector no puede aceptar la interacción del usuario. La propiedad disabled del selector debe establecerse en true para esta seudoclase.