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.

By Jquery27 comentários em Plugin do Jcalendar em Português

27 Replies to “Plugin do Jcalendar em Português”

  3. Desculpe-me postar novamente, mas é que consegui resolver o problema do OPERA… caso alguém não tenha solucionado ainda, no class do css ‘calendar_div’ acrescente ‘width:185px;’, sem as aspas, óbvio… aqui funfou… obrigado…

    Responder

  5. E ai rapaz, tuo Bem? Bem, muito bom o POST, realmente me ajudou bastante, só tive um contratempo estranho, que as vezes acontece comigo usando JQuery. Eu peguei a ultima versão da JQuery no site oficial, estava usando ela para fazer meus scripts. No entando, estava tendo problemas com o JCalendar, pois quando eu clicava no ícone para abrir o calendario, ele não abria, só abria quando licava na Input Text, por mais que eu colocasse o parametro “autoPopUp: ‘both’.”. Decidi então pegar o JQuery que você usou, e tcharam! Funcionou!! Bem, seria legal talvez você testar alguma hora e ver se tem algo que se possa fazer para funcionar com a ultima versão da Jquery(que deveria ser a que tem menos Bugs!).

    Bem, é isso, um abraço e parabéns pelo blog!

    Att.
    Rafael S.

    Responder

  6. @Rafael: Muito obrigado Rafael. A questão não é tanto bug na nova versão do jQuery, mas alguns plugins em novas versões tornam-se incompatíveis dependendo da maneira como foram feitos. Muitas vezes os desenvolvedores de plugins não lançam uma versão nova que adapta a novas versões. E isto gera muitos bugs, mas plugins consagrados, como o interface são incompatíveis com versões novas. Abraços e boa sorte!

    Responder

  7. Esse foi o único exemplo simples e funcional do jQuery Calendar, só que no meu caso eu preciso utilizar em vários campos no mesmo formulário, e em determinado ponto dá um erro alegando que tem muitos campos e não preenche mais.
    Alguém aqui já passou por isso?

    Responder

  9. Olá Alexandre,
    Muito bom este POST, so que tive um probleminha com a utilização dele.
    Em algumas máquinas, quando abre o calendário, aparece como o dia 13/10/2008 sendo uma terça-feira, quando o correto é segunda-feira.

    Você já teve este tipo de problema? Tem alguma dica de como resolver?
    Obrigado.

    Responder

  11. Já pereceberam que o dia 11 de Outubro sai duplicado no Jcalendar.

    Podem conferir incluisive no exemplo de este Blog?

    Alguém sabe como corrigir?

    Obrigado, Claudio

    Responder

  12. Olá! Muito bom mesmo o plugin 🙂 Parabéns.
    Quero relatar um probleminha que tem ocorrido comigo… De repente, do nada, o calendário começou a ficar leeeeento. clicava no input text e o calendário demorava a carregar, clicava no mês e demorava a carregar…Isso usando o Firefox. Testei no IE e no Chrome e a resposta ao click era normal. Desabilitei todos os complementos q uso no FF e isso aparentemente resolveu o “problema”, pelo que percebi o complemento que torna o jcalendar lento é o Firebug :

    Responder

  15. Bom dia… desde ja parabens pelo calendário 🙂 eu nao tenho mt pratica em jquery e gostaria de saber como fazer para que o calendário apareça na minha pagina assim que esta é carregada, pois nao tou conseguindo. se alguem me puder ajudar… obrigada

    Responder

  16. Olá amigo, eu tenho esse component JCalendar no meu netbeans e estou tentando usar ele pra uma aplicação desktop, só que não consigo dar evento de mouse nele, tipo eu queria que ao clicar numa data ele me abrisse uma nova janela tipo uma agenda…tem como vc me ajudar com algo..

    Responder

  17. @Joao: O plugin não foi feito para este propósito, pois ele em seu core anexa um evento para acontecer. Dê uma revisada no propósito que você deseja utilizar por que talvez não esteja da forma apropriada.

    @Paulo: Por favor, me explique melhor para eu poder te ajudar, por que desta forma não ficou muito claro. abraços…

    Responder
  19. Pingback: Calendário para jQuery em português em Webpoint - Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.

  25. Tudo bom pessoal…

    Muito bom o post.
    Seguinte resolvi testar o componente, porem quando o calendário é aberto ele fica em baixo dos box’s que ficam logo abaixo.
    Alguem ai sabe resolver este problema colocando ele por cima de qualquer outro campo

    Responder

Deixe um comentário

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