Plugin do Jcalendar em Português

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:



Para o CSS:

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.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>