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

  • Artigo

[ 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ê precisar permitir que os usuários definam uma data em seu aplicativo, por exemplo para agendar um compromisso ou definir a data de expiração de um cartão de crédito, será possível usar um Seletor de Data, que é parte da Biblioteca do Windows para JavaScript. O Seletor de Data exibe três controles para mês, dia e ano. 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 usar o Seletor de Data.

Pré-requisitos

Este tópico presume que você possa criar um aplicativo básico do Tempo de Execução do Windows em JavaScript. Para obter instruções sobre como criar seu primeiro aplicativo, consulte Criando seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript.

Instruções

1. Criando um Seletor de Data simples

Como na maioria dos controles WinJS, você pode criar um DatePicker de modo declarativo (como um atributo data-win-control em um elemento <div>) ou imperativo (em um bloco de códigos JavaScript). Para exibir o controle, você deve chamar WinJS.UI.processAll. Se você usa os modelos de projeto do Visual Studio para aplicativos da Windows Store em JavaScript, isso é feito para você no manipulador de eventos activated.

É assim que você declara um Seletor de Data declarativamente:

<!DOCTYPE html>
<html>
<head>
  <title>DatePicker 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>
</head>
 <body>
     <section>
         <h1> DatePicker Example</h1>
             <h3>Add a DatePicker Declaratively</h3>
             <div id="date" data-win-control="WinJS.UI.DatePicker"></div>
             <script type="text/javascript">
                 WinJS.UI.processAll();
             </script>
     </section>
 </body>
 
</html>

É assim que você cria um Seletor de Data no código:

<!DOCTYPE html>
<html>
<head>
<head>
  <title>DatePicker 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>
  </head>
    <body>      
        <section>
            <h1> DatePicker Example</h1>
                <h3>Add a DatePicker Imperatively</h3>
            <div id="date"></div>
            <script type="text/javascript">
               var dateDiv = document.getElementById("date");
               var datePicker = new WinJS.UI.DatePicker(dateDiv);
            </script>
        </section>
    </body>
</html>

Ao compilar e executar a sua solução, você verá um controle que, por padrão, exibe a data atual, com três listas suspensas para mês, dia e ano.

Quando você usa o arquivo ui-dark.css, o DatePicker deve ter esta aparência: DatePicker estilo escuro

Quando você usa o arquivo ui-light.css, o DatePicker deve ter esta aparência: DatePicker estilo claro

2. Mudando a data padrão

Você pode definir uma data padrão diferente declarativamente:

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{current:'2/20/2011'}"></div>

Você também pode definir a data padrão em código:

// "date" is the id of the <div> element
var dateDiv = document.getElementById("date") 
var datePicker = new WinJS.UI.DatePicker(dateDiv, {current: '2/20/2011'});

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:

  • 20 de fevereiro de 2011
  • '20/02/2011'
  • 'domingo, 20 de fevereiro de 2011'

Importante  Você pode usar qualquer calendário nesta versão.

 

3. Especificando datas mínimas e máximas diferentes

Por padrão, o menor ano que o usuário pode escolher é o ano atual menos 100 e o maior ano que o usuário pode selecionar é o ano atual mais 100. Para mudar o ano menor para 1900 e o último ano para 2300, você pode fazer o seguinte:

Declarativamente

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{minYear: 1900, maxYear: 2300}"></div>

Em código

var datePicker = new WinJS.UI.DatePicker(dateDiv);
datePicker.minYear= 1900;
datePicker.maxYear = 2300;

4. Mudando o padrão de dia, mês ou de ano

Você pode mudar o padrão do dia, mês ou ano. Por padrão, o Seletor de Data exibe o nome inteiro do mês, um dia de 2 dígitos e um ano de 4 dígitos na localização en-us. Você pode mudar isso das seguintes formas.

Para mudar a forma que o mês é exibido


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//change the month to an integer
datePicker.monthPattern = "{month.integer}"; 

//change the month to an abbreviation
datePicker.monthPattern = "{month.abbreviated}";

Para mudar a forma que o dia é exibido


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//display the day without leading zeros
datePicker.datePattern = "{day.integer(1)}";

//display the day of the week along with the date
datePicker.datePattern = 
    "{day.integer(2)} ({dayofweek.abbreviated})";

Para mudar a forma que o ano é exibido


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//diplay the year with only two digits
 datePicker.yearPattern = "{year.abbreviated}";

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

  • {day.integer} | day.integer(n)}
  • {dayofweek.full} | {dayofweek.abbreviated} | {dayofweek.abbreviated(n)}
  • {dayofweek.solo.full} | {dayofweek.solo.abbreviated} | {dayofweek.solo.abbreviated(n)}
  • {month.full} | {month.abbreviated} | {month.abbreviated(n)}
  • {month.solo.full} | {month.solo.abbreviated} | {month.solo.abbreviated(n)}
  • {month.integer} | {month.integer(n)}
  • {year.full} | {year.full(n)} | {year.abbreviated} | {year.abbreviated(n)}
  • {era.abbreviated} | {era.abbreviated(n)}

5. Alterando o calendário

Você pode alterar o calendário usado pelo Seletor de Data.

  • Altere o calendário para um dos seguintes valores:

    • "GregorianCalendar"

    • "HijriCalendar"

    • "HebrewCalendar"

    • "JapaneseCalendar"

    • "KoreanCalendar"

    • "ThaiCalendar"

    • "TaiwanCalendar"

    • "UmAlQuraCalendar"

    • "JulianCalendar"

    
datePicker.calendar = "ThaiCalendar";

6. Desabilitando um Seletor de Data

Você pode desabilitar um Seletor de Data definindo a sua propriedade disabled como true. Como resultado, o controle é visível mas é oculto e escurecido para o usuário.

datePicker.disabled = true;

7. Respondendo ao evento de mudança

Você pode modificar o comportamento em seu aplicativo tratando o evento change. Este evento surge quando o usuário muda uma data, não quando a data é mudada programaticamente.


datePicker.onchange = dateChangeHandler;

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

8. Mudando a aparência de um Seletor de Data

Em geral, você pode alterar a aparência do DatePicker usando estilos CSS. Você pode usar os estilos border-color e background-color para destacar seu DatePicker.

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

Você pode especificar determinadas partes do controle de um DatePicker usando as seguintes classes CSS:

  • win-datepicker
  • win-datepicker-date
  • win-datepicker-month
  • win-datepicker-year

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


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

Isto faz com que a lista suspensa de data apareça com uma borda azul (usando o arquivo ui-light.css) :Um DatePicker com estilo

Você pode especificar todas as três listas suspensas de DatePicker usando a sintaxe do prefixo do seletor de atributo CSS (^=), que encontra todo atributo cujo nome comece com a cadeia de caracteres especificada:

[class^="win-datepicker"] {border:red; }

9. Exibindo e ocultando controles

Você pode especificar se o dia e/ou o ano é exibido definindo o atributo display específico da lista suspensa como none:

.win-datepicker-year { display:none; }

Se quiser ocultar uma lista suspensa apenas para uma instância de um DatePicker, você deve especificar a ID do elemento <div>. Por exemplo, se você quiser ocultar a data apenas para o DatePicker exibido no elemento <div> que tiver uma ID de "data", faça o seguinte:

#date *.win-datepicker-date { display: none; }

10. Exibindo as listas suspensas de DatePicker verticalmente

Se você quiser exibir as listas suspensas de mês, dia e ano verticalmente em vez de horizontalmente, pode definir o atributo CSS display nos controles. Você também deve definir o display para bloquear-se no DIV.


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

Você pode exibir condicionalmente as listas suspensas 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) {
#date {display:block;}
*[class^="win-datepicker"] { display: block; }
}

11. Usando estilos diferentes para instâncias diferentes do Seletor de Data

Você pode usar estilos diferentes para uma instância específica do Seletor de Datas especificando o elemento <div> associado à instância. Por exemplo, se você tiver um Seletor de Data em um <div> que tiver uma ID de "data inicial" e outra em <div> com uma ID de "data final", você pode definir as cores de fontes diferentes para o Seletor de Data de data inicial e data final da seguinte forma:

#start-date [class^="win-datepicker"] { color:red; }
#end-date [class^="win-datepicker"] { color:blue; }

12. Usando pseudoclasses para definir estilos do DatePicker

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

  • win-datepicker: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 mês. DatePicker om focalização de mouse

  • win-datepicker: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.DatePicker no estado ativo

  • win-datepicker:focus. O seletor está realçado para aceitar as entradas do teclado.O DatePicker está realçado

  • win-datepicker: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.O DatePicker está desabilitado

Resumo

Neste tópico, você aprendeu como criar um Seletor de Data.