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 para Odegar Medeiros Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *