Guia de início rápido: adicionando um TimePicker (HTML)

Artigo
03/04/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Se você precisa permitir que os usuários selecionem uma hora em seu aplicativo, por exemplo, para agendar uma reunião ou um lembrete, você pode usar um TimePicker, que é parte da Biblioteca do Windows para JavaScript. O Seletor de Hora exibe três controles: um para hora, um para o minuto e um para escolher entre AM e PM. Estes controles são fáceis de usar com suporte de toque, podem ter estilo definido e podem ser configurados de algumas formas diferentes. (somente Windows)

Objetivo: Para demonstrar como adicionar um Seletor de Tempo.

Pré-requisitos

Este tópico presume que você possa criar um aplicativo da Windows Store básico em JavaScript. Para obter instruções sobre como criar o seu primeiro aplicativo, veja Criando o seu primeiro aplicativo da Windows Store em JavaScript.

Tempo para conclusão: 15 minutos.

Instruções

1. Criando um Seletor de Tempo simples

Assim como a maioria dos controles WinJS, você pode criar um TimePicker (Seletor de Hora) de modo declarativo (como um atributo data-win-control em um elemento <div>) ou imperativo (como um objeto em um bloco de códigos JavaScript). Para que o controle seja exibido, você deve chamar WinJS.UI.processAll. Se você estiver usando os modelos de projeto do Visual Studio para aplicativos da Windows Store em JavaScript, isso será feito para você no manipulador de eventos ativado.

Você cria um Seletor de Tempo declarativamente assim:

<!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 criar um Seletor de Tempo imperativamente (em código), você faz o seguinte:

<!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>

Ao compilar e executar a sua solução, você precisará de três controles que exibem a hora certa, um para a hora, um para o minuto e um para AM ou PM.

É assim que o TimePicker deve parecer ao usar o arquivo ui-dark.css: TimePicker estilo escuro

É assim que o TimePicker deve parecer ao usar o arquivo ui-light.css: TimePicker estilo claro

2. Mudando a hora padrão

Você pode definir uma hora padrão das seguintes formas:

Declarativamente

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

Imperativamente

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

Você pode formatar a cadeia de caracteres da hora de todas as formas que o objeto Date de JavaScript permite, exceto para valores UTC. Veja alguns exemplos:

03:20 pm
15:20:00

3. Especificando incrementos de minuto

Você pode mudar a forma com que os minutos são exibidos em um controle de minuto do Seletor de Hora definindo a propriedade minuteIncrement. Por exemplo, o código seguinte causa o controle de minuto para exibir minutos em múltiplos de 5.

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

4. Mudando a forma que o minuto e a hora são exibidos

Você pode mudar o padrão do minuto e da hora. Por padrão, o Seletor de Hora exibe a hora em 2 dígitos, minuto em 2 dígitos e um designador AM/PM no local inglês-eua. Você pode mudar isso das seguintes formas.

Para mudar a forma que o minuto é exibido

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

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

Para mudar a forma que a hora é exibida


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

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

Para especificar um relógio de 12 ou 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";

A lista a seguir dá os valores possíveis para os padrões que você pode usar em um Seletor de Hora:

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

5. Desabilitando um Seletor de Hora

Você pode desabilitar um Seletor de Hora definindo a sua propriedade desabilitada como true. Como resultado, o controle fica visível mas escurecido e não é disponibilizado para o usuário.

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

6. Respondendo ao evento onchange

Você pode usar o evento change para modificar o comportamento em seu aplicativo:

timePicker.onchange = hourChangeHandler; 

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

7. Mudando a aparência do Seletor de Hora

Em geral, você pode alterar a aparência do TimePicker usando estilos CSS.

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

E especificando uma lista suspensa de TimePicker usando uma das classes CSS a seguir:

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

Por exemplo, você pode alterar a cor da borda da lista suspensa de horas:

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

Isso faz com que a lista suspensa de horas apareça com uma borda azul: Borda azul da lista suspensa de horas do TimePicker

Você pode alterar a cor da borda da lista suspensa de período (AM/PM):

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

Isso faz com que a lista suspensa de período apareça com uma borda azul: A lista suspensa de período do TimePicker tem borda azul

Você pode especificar todas as três listas suspensas do TimePicker usando a sintaxe do prefixo do seletor de atributos CSS (^=), que encontra todos os atributos cujos nomes comecem com a cadeia de caracteres especificada:

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

8. Mostrando e ocultando os controles

Você pode especificar se um controle específico é exibido configurando o seu atributo de exibição em none:

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

Se você quiser ocultar um controle em somente uma instância de um Seletor de Hora, você precisa referenciar a ID do elemento associado <div>. Por exemplo, para ocultar o minuto somente para o Seletor de Tempo exibido no elemento <div> com uma ID de "hora", faça o seguinte:

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

9. Exibindo os controles do Seletor de Hora verticalmente

Se quiser exibir a hora, minuto e os controles AM/PM verticalmente em vez de horizontalmente, você precisa definir o atributo CSS display nos controles. Você também deve definir o display para bloquear-se no DIV.


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

Você pode exibir condicionalmente os controles verticalmente, por exemplo, quando a largura da tela cai abaixo de um limite especificado. A seguinte consulta de mídia CSS especifica que os controles devem ser exibidos verticalmente para todas as larguras de até 320 pixels.

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

10. Usando pseudo-classes para definir estilos do TimePicker

O TimePicker dá suporte às seguintes pseudo-classes que você pode usar como seletores para mostrar determinados estilos quando o TimePicker está em determinados estados.

win-timepicker:hover.O usuário coloca o cursor sobre o seletor, mas não o ativa clicando. Aqui o mouse está focalizando sobre a lista suspensa de horas.
win-timepicker:active. O seletor fica ativo depois que o usuário pressiona o controle para abrir a lista suspensa e antes que ele escolha uma opção.
win-timepicker:focus. O seletor está realçado para aceitar as entradas do teclado.
win-timepicker:disabled. O seletor não pode aceitar interação do usuário. A propriedade disabled do seletor deve ser definida como true para essa pseudo-classe.