Este post foi editado para oferecer uma solução completa e recente

Estamos construindo um novo componente de calendário completo, conheça o Trip Range Calendar

Calendário completo com a melhor experiência para escolha datas e intervalos de viagem: https://github.com/worknenjoy/trip-range

No momento temos um protótipo e se quiser participar deste projeto ou saber de atualizações e contribuir para oferecer o melhor calendário, cadastre-se para fazer parte da equipe ou receber atualizações! O Trip Range Calendar é open source:


    O calendário padrão do JQuery

    Esta é uma solução de um calendário para jQuery.
    Há um tempo atrás escrevi um post do plugin jCalendar em português. Ele é bastante visitado e gostaria muito de oferecer uma solução atual para este plugin usando o próprio jQuery. Muito tempo passou e atualmente existem soluções melhores para ter uma ferramenta de escolhas de datas. o jQuery UI veio como uma luva para unificar plugins de interface e um dos seus componentes é o Datepicker. Com ele, você pode configurar um calendário para funcionar no formato nacional apenas passando as configurações adequadas, sem modificar o core.

    Para utilizá-lo, é necessário fazer o download no site do jQuery UI. Esta biblioteca de plugins possui vários outros plugins que irei tratar no futuro, portanto se for utilizar mais alguma por conta própria baixe o pacote completo, caso contrário somente o plugin datepicker e o core do jQuery UI.

    Após inseri-lo no head do documento, basta ter um simples input referenciado de alguma forma, preferencialmente id, para que ele possa ser acessado via seletor do jQuery e assim inicializado como no exemplo:
    [jsfiddle url=”http://jsfiddle.net/UHH3q/1/” height=”200px” include=”html”]

    O arquivo calendário.jscontém o seguinte conteúdo:
    [jsfiddle url=”http://jsfiddle.net/UHH3q/1/” height=”200px” include=”js”]

    Ao passar as configurações acima o calendário se torna totalmente formatado para a forma nacional, simplesmente passando estes parâmetros. Há outras formas de personalização, como a faixa de anos exibida e outras configurações que pode ser consultadas na documentação. Os itens do exemplo acima são bastante auto-explicativo.

    O estilo pode ser personalizado no arquivo css que vem junto com o plugin e o jQuery UI tem conceito de temas. Você pode escolher um tema para ele que adeque mais a sua situação, tão bem como criar um personalizado apenas modificando o CSS.

    Agora com esta personalização temos este resultado final:
    [jsfiddle url=”http://jsfiddle.net/UHH3q/1/” height=”200px” include=”result”]

    67 Replies to “Calendário para jQuery em português”

    1. Gostaria de saber como faço pra setar o tamanho que eu quero que esse calendario apareça?? tem como?? ja procurei na documentação e nao encontrei… desde ja agradeço.

    2. Olá Alexandre… gostei muito desse aplicativo jQuery. Mas estou com uma dúvida…

      Como eu poderia integrálo com o PHP(por exemplo) para fazer um tipo de “calendário de eventos” para poder marcar datas específicas neste calendário???

      Eu sei fazer isso(teoricamente) mas com um calendário básico… sem nenhum efeito javascript…

      Você pode me dar uma ajuda com isso??

    3. @Marcelo: Por favor, verifique algum conflito de css. O tamanho da fonte do calendário é relativo ao tamanho base da fonte do site. Verifique o CSS do site em que ele está sendo inserido ou modifique o css do calendário para adaptar suas necessidades. Espero ter ajudado, boa sorte…

    4. Ola, estou tentando colocar o calendario no meu form mas o mesmo não funciona,

      ou no form não pode ter action”/”

      faço tudo igual esta na explicação mas não carrega nada

      Ademir Bastiani
      Floripa..

    5. Valeu por ter deixado esse código pronto. 🙂
      Eu gostaria de saber se tem como deixar esses valores para todos calendários que eu tiver no site, pois geralmente utilizo calendários em diversos lugares, daí ter que ficar duplicando esse código fica ruim. Teria alguma solução?

      Uma dica legal é colocar aquele campo de poder ser avisado de novos comentários nos artigos, pois assim eu seria avisado quando você respondesse, portanto teria como enviar para meu e-mail a resposta também? Grato!

    6. @Ademir: Somente com estas informações não tenho certeza o que pode ter acontecido. Possíveis possibilidades:
      Se não tiver dando erro de script, css do plugin não carregado ou o proprio plugin nao estiver sido carregado. Se estiver dando erro, o jQuery ou o plugin não está sendo carregado. Se você usar o firebug, você pode olhar se algum arquivo não está sendo carregado. Espero ter ajudade e boa sorte…

    7. @Juarez: Olá Juarez, para isto você pode usar o setDefaults que irá carregar por padrão as opções passadas para este métodos em todas as instâncias do datepicker:
      http://docs.jquery.com/UI/Datepicker/setDefaults

      Em relação a dica, estou abandonando o blog atual, estou trabalhando em uma nova versão e reformulando e revendo diversos items, muito obrigado pelo feedback, irei colocar esta feature com certeza, pois sei o quanto é útil! Mas até lá eu sempre respondo as dúvidas no momento que aprovo os comentários, então você pode assintar o rss para comentários 🙂

    8. Depois de alguns testes, vou colocar a dica pra quem quer diminuir o tamanho do calendário. Está no arquivo jquery-ui-1.7.2.custom.css, na linha 51 (de acordo com o Dreamweaver).

      Altere onde diz: “font-size: 1.1em;”
      Eu alterei para 0.7 e achei um tamanho bom. Mas façam os testes ae…

      Obrigado pela dica, não conhecia esse calendário.

      1. Muito obrigado pela dica referente ao tamanho do datepicker! Para ser mais exato ele está dentro do escopo do ui.widget ui.widget; conforme alterar o tamanho da fonte, o datepicker também será alterado sem sofrer distorções! Valeu!

    9. Muito bom o POST, estou tentando integrar o “Datepicker” com um campo de meu sistema, mas não estou tendo sucesso nos resultados, tem alguma dica para interagir com campos dinâmicos?
      Obrigado

    10. Excelente POST Alexandre 😉
      Funcionou à 1ª, mas tenho aqui um problema não sei se é so meu mas quando tento ter varios calendarios na mesma pagina só aparece o 1o, não sei do que pode ser… :S

      Obrigado 😉

    11. Muito bom o Calendário! Funciona perfeitamente! Agora uma dúvida: Como faço para tornar datas quaisquer, em datas especiais, de eventos por exemplo, que fiquem de repente em Bold com outra cor, e que ao passar o mouse apareça o nome do evento, ou de repente se torne um link para a página do evento dentro do site. É muito complexo?

      Obrigado!

    12. Pra quem precisa diminuir o tamanho do calendário, ai vai uma dica:

      1) /* Component containers */: Pode ser mudado o tamanho da fonte do titulo do mês; Acrescentando (font-size:14px) nessa linha:
      .ui-widget-header { border: 0px solid #06d4ae; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; font-size:14px}

      2) Tamanho do calendário pode ser ajudado na linha de comentário: /* Datepicker */

      Bom, sou muito leiga em CSS, mas espero que isso possa ajudar!

      Abraços!

      Alexandre Parabéns pelo POST! Muito bem explicado e bem usual!!!!

      Continue assim!

      Sucesso!

    13. Por favor, gostaria de uma ajuda já que não sou muito bom em JS..

      O que devo fazer se precisar usar dois calendários na mesma página? Por exemplo.. preciso selecionar a data inicial e data final. Preciso fazer duas funções uma para cada calendário ou posso usar uma função única?

    14. @Felipe: Quando você usa $(‘seletor’).datepicker() você está passando os seletores que serão aplicados o calendário. Se por exemplo você colocar uma classe chamada calendário nos inputs onde o plugin será aplicado, basta chamar $(‘.calendario’).datepicker(). Espero ter ajudado e boa sorte.

    15. alexandre tambem estou com a mesma duvida do felipe
      poderia explicar novamente nao entendi.
      que colocar dois calendario como fazer sendo um data inicial e final tenho que fazer classes ou nao é necessario?

      valeu obrigado

    16. @gederson: Isto não é uma dúvida do plugin e sim do jQuery, pois esta é a forma padrão de como todos agem. Se você utilizar $(‘input’).datepicker() todos os inputs serão iterados e os eventos referentes ao plugin são registrados em cada campo. Se você atribuir uma classe e chamar $(‘.nomedaclasse’).datepicker() todos campos com a classe nomedaclasse terão um datepicker. Dá uma estudada nos seletores, é difícil conseguir explicar sem saber seu nível em jQuery.

    17. Como fazer ele pegar a data do servidor apache, pois deste jeito ele pega a data do pc do usuário, sendo assim se a data estiver errada dá problema. Digo isso pois queria usar para preenchimento de um formulário onde o usuário marca uma data para uma futira visita.

    18. Só uma dúvida simples, não consegui encontrar no css onde posso modificar a imagem de ‘próximo’ e ‘anterior’, alguem pode me ajudar? Valeu.

    19. Cara, muito obrigado pela dica. Valeu mesmo !

      Me ajudou demais, Ah sim o arquivo ‘calendario.js’ eu copiei direto la da página de exemplo e mantive o crédito de autor (não sei se era necessário manter, ou sei rs, mas …)

      Valeu mesmo !

      1. I solved the issue of clienarg read-only date fields by adding a keydown trigger(keypress doesn’t work with delete and backspace keys):$( #datefld ).keydown(function(event) { //if backspace or delete key pressed if (event.which == 8 || event.which == 46) { $(this).val( ); } } );

    20. Alexandre, fui utilizar o calendário junto a outro recurso JQuery, o jqtransform, e ele alterou o tamanho dos “inputs” do site. O que eu faço pra que isso não aconteça?

      Abraços!

    21. Grande artigo, estava procurando isso e você foi o melhor que achei, mas eu tenho um problema, preciso travar o segundo input com a data minima = ao 1º input + 20 dias, tentei usar a função do site jquery mas não tive sucesso, se vc puder me ajudar, valeu.

    22. Olá muito bom post, parabéns, mas estou com um problema para introduzir o calendário no meu sistema.
      O sistema é todo com queryString, se eu pegar o formulario onde preciso colocar o calendario e colocar em uma pagina normal e chamar os arquivos js e os aquivos css, funciona normal, mas quando faço a chamada na minha index que é onde estao todos os outros js e css do sistema ele nao funciona. Também tentei colocar direto na pagina onde está o formulario e nao funcionou, e nao posso mudar pra chamar esse formulario em separado por cuasa de cabeçalho e rodapé essas coisas.
      Será que tenho q passar no arquivo calendario o nome do formulario tbm junto com onome do imput?

      se puder me ajudar com essa duvida ficarei muito grato!

    23. @Nadijar: você não foi claro na sua explicação da origem do problema. Possivelmente se no seu sistema não está funcionando com algum conflito com outro script, mas da forma que você explicou realmente não consegui entender.

    24. Muito legal esse exemplo, porém, no caso de haver a necessidade de usar vários calendários na aplicação que você está desenvolvendo, pelo que entendi haveria a necessidade de aplicar essas configurações para cada objeto do tipo calendario, no meu caso alterei o código no jquery.ui.datepicker.js a partir da linha 43 para o seguinte:
      this.regional[”] = { // Default regional settings
      closeText: ‘Done’, // Display text for close link
      prevText: ‘Anterior’, // Display text for previous month link
      nextText: ‘Próximo’, // Display text for next month link
      currentText: ‘Hoje’, // Display text for current month link
      monthNames: [‘Janeiro’,’Fevereiro’,’Março’,’Abril’,’Maio’,’Junho’,
      ‘Julho’,’Agosto’,’Setembro’,’Outubro’,’Novembro’,’Dezembro’], // Names of months for drop-down and formatting
      monthNamesShort: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Ag’, ‘Set’, ‘Out’, ‘Nov’, ‘Dez’], // For formatting
      dayNames: [‘Domingo’, ‘Segunda-Feira’, ‘Terça-Feira’, ‘Quarta-Feira’, ‘Quinta-Feira’, ‘Sexta-Feira’, ‘Sábado’], // For formatting
      dayNamesShort: [‘Dom’, ‘Seg’, ‘Ter’, ‘Qua’, ‘Qui’, ‘Sex’, ‘Sab’], // For formatting
      dayNamesMin: [‘D’,’S’,’T’,’Q’,’Q’,’S’,’S’], // Column headings for days starting at Sunday
      weekHeader: ‘Sem’, // Column header for week of the year
      dateFormat: ‘dd/mm/yy’, // See format options on parseDate

      Dessa forma todos os campos de formulários que eu inserir que precisem ser do tipo calendário já estarão em português.

      vlw

    25. @Alexandre: Tem esta solução também, mas alterar o código fonte do plugin não é recomendável. Configurações de tradução devem permanecer em arquivos diferentes. Nas versões mais recentes do jQuery existe o I18n, dá uma conferida. Espero ter ajudado. Abraços…

    26. Olá Alexandre, bom dia.

      Gostei deste calendário.
      Mas para que eu possa usá-lo, teria que adaptar uma coisa e corrigir outra e gostaria de saber como fazer isso:

      A) O calendário esta entregando o valor dento do próprio type text, eu preciso que ele entregue dentro de um outro type text.

      B) Na minha adaptação, os botões de avançar e retroceder, embora funcionem, não estão aparecendo.

      Grato se puder ajudar.

      Forte abraço.

      Carlos Rocha
      carcleo@oi.com.br

    27. Olá, parabéns pelo post, o calendario está ótimo. Para mim falta só uma coisa para resolver meu problema.
      Preciso de um sistema de agenda de eventos que mostre o calendario tal como já faz mas com os dias que possuir agendamento em destaque para que os usuarios do site vejam e quando clicarem o sistema mostra os agendamentos desta data.

    28. Ola Galera gostaria de tira uma pequena duvida, o meu esta tudo certinho ja coloquei no formulario e tal! mais ao passar os meses esta escrito errado! exemplo a palavara Março que tem o ç ele fica desconfigurado mais so os meses que tem acento! alguem sabe me informa?

    29. Alexandre, eu coloquei com sucesso o calendário nas minhas páginas para gerar a data para o form, porém tive que configurar com a data em yy/mm/dd, pois o servidor só aceita data em inglês. Como eu faço para que esta data seja em português, já que no imput ela só funciona em no formato em inglês. Sei que existem formas em php e mysql, mas você pode me ajudar em relação a onde colocar esta transformação de modo que o calendário funcione normalmente?

    30. Ola, sera que me podem ajudar a fazer um calendario com 2 entradas?

      Isto é para reservas:
      data_entrada e data_saida, onde a data_entrada não pode ser inferior ao dia atual e a data_saida tem que ser superior a data_entrada…

      Obrigado

    31. Para diminuir o tamanho do calendário basta colocar
      font-size:px; na classe .ui-datepicker, logo você determina o tamanho do calendário.

      Abraço

    32. Como utilizar isto em mais de um campo ? quando utilizo em um funciona, porém quando utilizo em varios, a primeira chamada aparece, porém os outros campos já não pegam mais.
      ou seja só chama uma vez.
      Agradeço.

    33. Tentei usar esse componente em um arquivo que carrego dentro de uma div e não funciona, sabe como resolver? chamando o arquivo direto funciona, mas carregando em uma div pelo evento load() nao funciona

    34. E ai Alexandre!
      Cara! Voce mandou muito bem com esse código!
      Exemplificou muito detalhadamente o funcionamento.

      Vou contribuir com o pessoal ai que quiser DESABILITAR DATAS ANTERIORES ao dia atual.
      Abaixo o código pode ser útil!

      Valeu Alexandre!

      $(‘.datebegin’).mask(’00/00/0000′);
      $(‘.datebegin’).datepicker({
      dateFormat:’dd/mm/yy’,
      dayNames: [‘Domingo’, ‘Segunda’, ‘Terça’, ‘Quarta’, ‘Quinta’, ‘Sexta’, ‘Sábado’, ‘Domingo’],
      dayNamesMin: [‘D’, ‘S’, ‘T’, ‘Q’, ‘Q’, ‘S’, ‘S’, ‘D’],
      dayNamesShort: [‘Dom’, ‘Seg’, ‘Ter’, ‘Qua’, ‘Qui’, ‘Sex’, ‘Sáb’, ‘Dom’],
      monthNames: [‘Janeiro’, ‘Fevereiro’, ‘Março’, ‘Abril’, ‘Maio’, ‘Junho’, ‘Julho’, ‘Agosto’, ‘Setembro’, ‘Outubro’, ‘Novembro’, ‘Dezembro’],
      monthNamesShort: [‘Jan’, ‘Fev’, ‘Mar’, ‘Abr’, ‘Mai’, ‘Jun’, ‘Jul’, ‘Ago’, ‘Set’, ‘Out’, ‘Nov’, ‘Dez’],
      nextText: ‘Próximo’,
      prevText: ‘Anterior’,
      changeMonth: true,
      changeYear: true,
      minDate: “+1D”,
      maxDate: “+365D”
      });

    Deixe um comentário para Gabriel Cancelar resposta

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