JQuery Datepicker: Criando calend�rios em Javascript

Calend�rios s�o elementos fundamentais e largamente utilizados em formul�rios para a entrada de dados por parte do usu�rio. At� a chegada da HTML5, n�o havia controles nativos dessa linguagem para representar campos de data em p�ginas web.

Saiba mais sobre o HTML 5

Para suprir essa necessidade, foram desenvolvidos plugins utilizando JavaScript e CSS para criar um calend�rio, geralmente a partir de um input to tipo text. O principal deles pertence � biblioteca jQuery UI (User Interface), da pr�pria jQuery Foundation. A jQuery UI fornece uma s�rie de componentes como calend�rios, abas, bot�es e caixas de di�logo de f�cil utilizaç�o.

Neste artigo conheceremos o componente Datepicker que pode ser facilmente integrado � p�gina atrav�s da refer�ncia � jQuery UI e partindo de um input com type="text".

Calend�rio jQuery com Datepicker

Nos exemplos que desenvolveremos ao longo desse artigo, ser� utilizado um arquivo HTML com a seguinte estrutura:

<!doctype html>
  
<html>
<head>
    <meta charset="utf-8" />
    <title>Calend�rio jQuery</title>    
</head>
<body>
    <p>Data: <input type="text" id="calendario" /></p>
 </body>
</html>

Listagem 1. Estrutura b�sica do arquivo HTML

Nesse arquivo n�o h� nenhum c�digo desconhecido, apenas um input do tipo text que dar� origem ao calend�rio.

Tendo o c�digo HTML, � preciso referenciar � jQuery UI que � formada basicamente por dois arquivos Javascript e um CSS. Para isso, adicione ao cabeçalho (head) do html as seguintes tags:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

Listagem 2. Refer�ncias � biblioteca jQuery UI

Artigo: jQuery Tutorial

Feito isso, podemos agora obter o calend�rio propriamente dito. Isso pode ser feito adicionando um pequeno script ao cabeçalho da p�gina (abaixo das tags da Listagem 2). Esse script apenas chamar� o m�todo datepicker definido na jQuery UI, a partir do input calend�rio. Adicione ent�o o seguinte c�digo � p�gina e abra o arquivo no browser. O resultado obtido � apresentado na Figura 1.

<script>
$(function() {
    $( "#calendario" ).datepicker();
});
</script>

Listagem 3. Criando o calend�rio b�sico

Figura 1. Calend�rio B�sico

Clicando sobre uma data, o input receber� o valor selecionado. Uma vez invocada a funç�o datepicker, o input n�o pode mais receber caracteres inv�lidos para datas como letras.

Sabendo obter o calend�rio b�sico, pode-se partir para alguns recursos mais avançados que permitem aplicar certas configuraç�es. A funç�o datepicker pode receber uma s�rie de par�metros nomeados, como veremos a seguir.

Mostrando �cone para ativar o calend�rio

O calend�rio � exibido originalmente quando o input recebe o foco, mas podemos desejar exibir um �bot�o� para que o calend�rio seja aberto quando o usu�rio clicar sobre ele. O c�digo a seguir faz com que uma imagem (no caso, salva no mesmo diret�rio do html, mas o leitor pode informar o caminho completo de outro arquivo de imagem) seja exibida ao lado do input.

<script>
$(function() {
    $( "#calendario" ).datepicker({
        showOn: "button",
        buttonImage: "calendario.png",
        buttonImageOnly: true
    });
});
</script>

Listagem 4. Exibindo �cone de ativaç�o do calend�rio

O resultado � o seguinte:

Figura 2. Calend�rio com �cone

Calend�rio com barra de bot�es de aç�o

� poss�vel tamb�m exibir uma barra com dois bot�es de aç�o no rodap� do calend�rio. Esses bot�es servem para localizar a data atual e para encerrar a seleç�o da data, confirmando o valor selecionado. Para exibir essa barra, basta passar o par�metro showButtonPanel como true.

<script>
$(function() {
    $( "#calendario" ).datepicker({
        showButtonPanel:true
    });
});
</script>

Listagem 5. Exibindo bot�es de aç�o

Figura 3. Calend�rio com bot�es de aç�o

Definindo o formato da data

Um ponto muito importante quando se trabalha com campos de data � o formato em que esta � exibida. Para que o calend�rio esteja sempre adequado ao padr�o utilizado na p�gina desenvolvida, pode-se informar o formato da data atrav�s do par�metro dateFormat.

O formato � composto por letras que identificam o dia(dd para o valor num�rico e DD para o nome do dia), m�s (mm para o n�mero e MM para o nome do m�s) e ano (yy). A seguir definimos o formato do calend�rio para ano-m�s-dia (yyyy-dd-MM).

<script>
$(function() {
    $("#calendario").datepicker({dateFormat: 'yy-mm-dd'});
});
</script>

Listagem 6. Formatando a data

O resultado � mostrado na Figura 4.

Figura 4. Data Formatada

Permitindo selecionar outros meses e anos

Com a passagem de apenas dois par�metros � poss�vel configurar o datepicker para mostrar uma caixa de seleç�o para meses e anos, permitindo ao usu�rio localizar mais facilmente a data desejada.

<script>
$(function() {
    $("#calendario").datepicker({
        changeMonth: true,
        changeYear: true
    });
});
</script>

Listagem 7. Selecionando meses e anos

Figura 5. Caixas de seleç�o de meses e anos

Mostrando datas dos meses seguinte e anterior

Naturalmente s�o exibidos apenas os dias do m�s atual. Como se v� na imagem acima, existe um espaço em branco ap�s o dia 31, pois ali acaba o m�s. Por�m, pode ser interessante permitir ao usu�rio visualizar e selecionar datas dos meses seguinte e anterior ao atual.

<script>
$(function() {
    $("#calendario").datepicker({
        showOtherMonths: true,
        selectOtherMonths: true
    });
});
</script>

Listagem 8. Exibindo e selecionando datas de outros meses

O primeiro par�metro faz com que as datas sejam exibidas, o segundo permite ou n�o selecion�-las.

Figura 6. Datas dos meses seguinte e anterior ao atual

Exibindo v�rios meses

Outro recurso bastante interessante do datepicker � a possibilidade de exibir v�rios meses ao mesmo tempo ao abrir o calend�rio. Isso pode servir, por exemplo, quando o usu�rio deve selecionar uma data entre um n�mero de meses. Isso pode ser feito facilmente passando a quantidade de meses para o par�metro numberOfMonths, como vemos a seguir.

<script>
$(function() {
    $("#calendario").datepicker({
        numberOfMonths: 3
    });
});
</script>

Listagem 9. Exibindo mais de um m�s

Nesse caso foram listado tr�s meses (a partir do atual).

Figura 7. Listando tr�s meses

Traduzindo o calend�rio

Como deu pra perceber at� esse ponto, o calend�rio � apresentado nativamente em ingl�s, idioma oficial da jQuery. Por�m, �s vezes � fundamental que as informaç�es sejam dispostas no idioma nativo em que a aplicaç�o � desenvolvida. Assim como nos exemplos anteriores, isso pode ser feito apenas passando par�metros para a funç�o datepicker, como � feito na listagem a seguir.

<script>
$(function() {
    $("#calendario").datepicker({
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','S�bado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','S�b','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });
});
</script>

Listagem 10. Traduzindo as informaç�es do calend�rio

Com isso, as informaç�es passam a ser exibidas no padr�o portugu�s/brasileiro.

Figura 8. Calend�rio traduzido

O componente datepicker possui ainda uma s�rie de outras funcionalidades n�o apresentadas nesse artigo. Para conhec�-las, � interessante visitar a p�gina da jQuery UI e ver a documentaç�o oficial em DatePicker Documentation.

Finalizamos ent�o este artigo que mostrou como adicionar um calend�rio a p�ginas web de forma simples e pr�tica, com algumas opç�es de customizaç�o.

At� a pr�xima oportunidade.

Links �teis

Hotsite com Bootstrap e jQuery:
Neste exemplo veremos como criar o layout de um hotsite no modelo One Page (uma �nica p�gina).
Aquecendo no Lazy Load:
Neste DevCast conversaremos sobre o Lazy Load, sua utilidade e analisaremos alguns casos reais de uso. Por fim, veremos um c�digo de exemplo com HTML, CSS e jQuery.
Como trabalhar com coleç�es de objetos no Delphi:
Neste microexemplo voc� aprender� a trabalhar com a classe TObjectList no Delphi.

Saiba mais sobre jQuery ;)

Como evitar m�ltiplas requisiç�es ao servidor:
Aprenda neste artigo como desabilitar bot�es utilizando jQuery, algo muito �til para evitar m�ltiplos cliques e, consequentemente, v�rias requisiç�es ao servidor.
Eventos em jQuery: Diferenças entre bind, live, delegate e on:
Neste artigo conheceremos os diferentes m�todos para tratamento de eventos da jQuery, analisando o funcionamento de cada um.
Curso de jQuery B�sico:
Neste curso de jQuery ser�o apresentados conceitos envolvendo as tecnologias front-end como HTML, CSS, Javascript.
O que � jQuery?:
Neste curso conheceremos a jQuery, biblioteca JavaScript que facilita e agiliza a construç�o de scripts para o client-side possibilitando uma melhor usabilidade ao usu�rio.
Validaç�o de formul�rios com jQuery:
A validaç�o � um processo fundamental para garantir a integridade dos dados submetidos na aplicaç�o.

Calend�rio em jQuery - Criando Calend�rios com DatePicker

Veja neste artigo como criar um calendário em jQuery utilizando um Datepicker de input para formulários de páginas web utilizando a biblioteca jQuery UI.