Webpoint

O Jquery oferece um Plugin para escolha de datas em campos de textos excelente. Ele se chama Jcalendar. Ele é amplamente customizável e a aparência pode ser controlada totalmente por CSS. O único problema que sua estrutura é em inglês e ao traduzir as strings no arquivo original, o layout bagunça um pouco. Então resolvi fazer uma versão em português para quem quiser implementar em seu site. Quem já tem implantado, basta substituir o arquivo.

Versão em Português do Jcalendar

CSS adpatdo do Jcalendar para a versão em Português

Como funciona o Jcalendar?

Para o seu funcionamento, estes dois arquivos tem que estar referenciados no head do documento(O Jquery, e o plugin):

Para o script:

<script src="jquery.js" type="text/javascript">
 
</script>
 
<script src="jquery.calendar.js" type="text/javascript">
 
</script>

Para o CSS:

 
<style type="text/css">
  @import url(jquery-calendar.css);
</style>
 

Depois disto, para aplicar um simples calendário, utilize as seguintes linhas:

$('input selector').calendar();

É possível também passar várias configurações, como autopopup, ícone em image, o formato da data etc.

Alguns exemplos do Jcalendar

Parâmetros

O código para o segundo exemplo encontra-se abaixo:

$('input selector').calendar({autoPopUp: 'both',
 
  buttonImageOnly: true,
 
  buttonImage: 'calendar.gif',
 
  buttonText: 'Calendar'});

Assim, com esses parâmetros você especifica uma imagem para servir de ícone como calendário:

• autoPopUp - Especifica se o calendário vai aparecer quando o usuário der focus no campo (focus), quando o ícone for clicado (buttom), ou em ambos os casos(both)
• buttomImageOnly - Coloca somente a imagem, aceita true ou false
• buttomImage - especifica a imagem que será o ícone do calendário
• buttomText - especifica o texto do calendário

Se desejar mudar o layout, apenas modifique o CSS. Uma boa maneira de se orientar na hora de montar é usar o firebug para ver o nome das classes e ids no formulário, mas fica a critério de vocês.

Considerações finais

O jCalendar não funciona no IE 6 e 7 se for referenciado no script sem o import, portanto, não deixem de colocar como está listado acima. O Opera apresenta um bug no dimensionamento do box do calendário. Vou tentar solucionar e posto aqui quando conseguir, mas ele funciona muito bem na maioria dos Browsers. Se tiverem algum problema, comentem que eu posso ajudar quando for possível.