JQuery: Adicionando um Calendário ao seus campos de Texto.
No dia a dia de todo programador, sempre encontramos vários formulários de cadastro que possuem campos para entrada de data. Esse tipo de informação pode causar dores de cabeça quando não é bem tratado. Imagine que você deixou o seu campo aberto para que o usuário digite a data a sua vontade, provavelmente alguém vai digitar uma data inválida e se você utiliza alguma linguagem fortemente tipada e tentar converter em um formato de data para teste vai gerar Exceptions no seu programa.
Bom, uma forma bem simples e elegante de resolver esses contratempos é criar uma mascara para o campo que você deseja que seu usuário preencha com uma data válida. Alem de facilitar para o próprio usuário que pode digitar sem se preocupar com colocar “/” e para você que pode ficar mais tranquilo ao tratar esses dados internamente no seu código.
Mas se você quer ir um pouco alem e facilitar mais ainda as coisas para seu cliente, você pode adicionar um pequeno calendário, onde ele ira selecionar a data desejada, sem precisar digitar nada e nem correr riscos de digitar um valor errado. Alem de deixar seu formulário muito mais atraente. Para isso, nada melhor que utilizar uma ferramente JQuery para isso, alem de facil de implementar, ainda é muito interativo e rápido para carregar em qualquer Browser atual.
O DataPicker faz parte da biblioteca Jquery.UI, uma das implementações Jquery que facilitam muito nosso trabalho do diário. Se você acessar o site http://jqueryui.com/home , vai poder visualizar todas as informações sobre os controles disponíveis alem de vários exemplos prontos para modificar e implementar no seu código, como este que vou demonstrar abaixo, tudo muito simples e o melhor, cross-Browser.
Vamos fazer um exemplo simples de DatePicker em um campo de texto padrão. Para isso você precisa apenas ter o JQuery e o JQuery.UI. Você pode baixar os dois direto pelo site http://jqueryui.com/download , na area de Downloads, a pagina configura o arquivo como você quiser, para esse exemplo precisamos que o DatePicker esteja selecionado. Veja a imagem abaixo:
O Jquery pode ser baixado no site oficial http://jquery.com/ , eu recomendo a versão de produção, que já é compactada para diminuir a carga de download da pagina.
Agora vamos para o script, que é bem pequeno:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$( "#data" ).datepicker();
});
</script>
<p>Campo data:<input type="text" id="data"></p>
Se você copiar o script acima e colar em um editor de texto comum e salvar como HTML, ira visualizar nosso exemplo. Muito simples, repare que nesse exemplo eu estou utilizando o googleapi para incluir a biblioteca javascript necessária, mas você pode baixar e incluir de um diretório local no seu computador, fica a sua escolha. Outra dica é que, no site do Jquery.UI você pode escolher um dos pacotes de layout disponíveis para deixar o calendario mais bonito. Quando você faz o download dos arquivos, uma pasta contendo o css do estilo desejado tambem vai vir junto no arquivo, basta incluir no seu projeto :
<link rel="stylesheet" href="[caminho do arquivo] " type="text/css" media="all" />
Quase pronto né, se você observar bem, o calendario esta no padrão americano, mas calma, para isso tambem tem solução. No link http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ você encontra uma lista com varios arquivos de configuração para o idioma que precisar, incluindo o Portugues do Brasil. Faça o download e inclua no seu script como um script comun:
<script src="[caminho do script de configuracao]" type="text/javascript"></script>
Siga a ordem, primeiro o JQuery, depois o JQuery.UI e depois esse arquivo de configuração. Você ainda pode experimentar as configurações disponíveis para o DatePicker, tudo esta bem explicado no site http://bugs.jqueryui.com/report/10?P=datepicker .
Bom, espero que ajude vocês pessoal, qualquer coisa faça um FeedBack acessando meu Blog http://altieripereira.blogspot.com