Calendário em Javascript em português usando jQuery

Este, é um plugin de jQuery, para mostrar calendário ao escolher uma data em um input, foi desenvolvido por mim (Danilo Augusto), para ser usado em alguns projetos na Click. O plugin tem uma série de opções para ser customizadas e pesa 9kb de javascript (ou 7kb na versão minificada).

Todos os exemplos e scripts estão disponíveis para download.

Opções do Plugin

Opção O que é? Padrão
target Objeto (input ou spam ou qualquer objeto) onde retornará a data escolhida no calendário
targetDay Objeto (input ou spam ou qualquer objeto) onde retornará o dia escolhido no calendário
targetMonth Objeto (input ou spam ou qualquer objeto) onde retornará o mês escolhido no calendário
targetYear Objeto (input ou spam ou qualquer objeto) onde retornará o ano escolhido no calendário
dateDefault Data selecionada ao abrir o calendário Data Atual
referencePosition Objeto de referência para posicionamento relativo this
top Nos calendários com posicao relativa / absoluta pode ser ajustado o top (em pixels) 0
left Nos calendários com posicao relativa / absoluta pode ser ajustado o left (em pixels) 0
closeClick O calendário é fechado quando clicado em alguma data true
minDate Data mínima em que o calendário deve permitir o usuário clicar
maxDate Data máxima em que o calendário deve permitir o usuário clicar

Como Invocar

Primeiro chame o jQuery, o script do calendário e o css dele:

		<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
		<script type="text/javascript" src="js/jquery-click-calendario-1.0.js"></script>
		<link href="_style/jquery.click-calendario-1.0.css" rel="stylesheet" type="text/css"/>
	

Detalhe importante:

Como o evento de calendário é atribuído ao elemento, a chamada do modal, deve estar ou depois do html, ou com onload. Para fazer com onLoad, coloque dentro o código do modal dentro do famoso ready do jQuery.

Exemplo simples

Esse é caso mais comum, o calendário é atribuído quando é clicado no input e o target (o próprio input), é onde vai apresentar o resultado do click do calendário.

<!-- HTML !-->
<input type="text" name="data_1" id="data_1" size="10" maxlength="10"/>

/* Javascript */
$('#data_1').focus(function(){
	$(this).calendario({
		target:'#data_1'
	});
});
		

Clique no input ( onfocus ) para abrir o calendário.

Exemplo com top e left

Com top e left é possível alterar a posição do calendário. A base (top: 0 e left: 0) é o inicio do elemento que chama o calendário

<!-- HTML !-->
<input type="text" name="data_2" id="data_2" size="10" maxlength="10"/>

/* Javascript */
$('#data_2').focus(function(){
	$(this).calendario({
		target:'data_2',
		top:0,
		left:130
	});
});
	

Clique no input ( onfocus ) para abrir o calendário.

Exemplo sem closeClick

O closeClick serve para fechar o calendário quando clicar em alguma data. O padrão dele é true, nesse exemplo vamos deixar false;

<!-- HTML !-->
<input type="text" name="data_3" id="data_3" size="10" maxlength="10"/>

/* Javascript */
$('#data_3').focus(function(){
	$(this).calendario({
		target:'data_3',
		closeClick:false
	});
});
	

Clique no input ( onfocus ) para abrir o calendário.

Exemplo com dateDefault

dateDefault é a data que vem selecionada no calendário, o default desse parâmetro é a data atual. No exemplo vamos colocar uma data qualquer.

<!-- HTML !-->
<input type="text" name="data_4" id="data_4" size="10" maxlength="10" value="13/12/2005" />

/* Javascript */
$('#data_4').focus(function(){
	$(this).calendario({
		target :'#data_4',
		dateDefault:$(this).val()
	});
});
	

Clique no input ( onfocus ) para abrir o calendário.

Exemplo com dia / mês / ano

É possível também dividir a data entre dia / mes e ano.

<!-- HTML !-->
<input type="text" name="data_5" id="data_5_dia" size="2" maxlength="2" value="28"/>
<input type="text" name="data_5" id="data_5_mes" size="2" maxlength="2" value="06"/>
<input type="text" name="data_5" id="data_5_ano" size="4" maxlength="4" value="1983"/>

/* Javascript */
$('#data_5_dia, #data_5_mes, #data_5_ano').focus(function(){
	$(this).calendario({
		targetDay :'#data_5_dia',
		targetMonth :'#data_5_mes',
		targetYear :'#data_5_ano',
		dateDefault: $('#data_5_dia').val()+"/"+$('#data_5_mes').val()+"/"+$('#data_5_ano').val(),
		referencePosition : '#data_5_dia'
	});
});
	

Clique em um dos inputs ( onfocus ) para abrir o calendário.



Exemplo com range de Data

Nos parâmetros minDate e maxDate é possível definir um range para a navegação do calendário. No exemplo abaixo, a data mínima “selecionável” é 10/11/2008 e a data máxima que se pode escolher é 25/01/2009

<!-- HTML !-->
<input type="text" name="data_6" id="data_6" size="10" maxlength="10" value="13/12/2008" />

/* Javascript */
$('#data_6').focus(function(){
	$(this).calendario({
		target :'#data_6',
		dateDefault:$(this).val(),
		minDate:'10/11/2008',
		maxDate:'25/01/2009'
	});
});
	

Clique no input ( onfocus ) para abrir o calendário.

Lembrando que todos os exemplos e scripts estão disponíveis para download.

Obrigado a todos que reportaram o bug do parseInt nos meses 08 e 09, o bug foi corrigido.

127 thoughts on “Calendário em Javascript em português usando jQuery

  1. Sobre o blur eu fiz o seguinte workaround:

    $(‘id_input’).blur(function() {
    window.setTimeout(“$(‘id_calendario’).remove();”, 500);
    });

    Se necessário pode aumentar o tempo que ele fica aberto após sair do input.

    Gosto muito de usar esse plugin de data, é muito prático e objetivo.

  2. Muito Bom! agora eu só precisava que quando o usuário escolher uma data no calendário, após preencher o campo da data, ja chamar uma outra função.
    Existe alguma maneira de fazer isso com que ja existe hoje no plugin ou teria de implementar isso no js dele?

    Obrigado!

  3. Boa tarde Danilo, há alguma configuração para se escolher varios dias e estes ficarem salvos ao mudar de mes/ano??

  4. Realmente muito bom e bem mais simples de utilizar em relação a alguns modelos disponíveis na internet.

    Aparentemente mais limpo.

  5. vc sabe como eu faço para selecionar vários dias? Tipo: Eu cadastro várias noticias e o datepicker pega as datas das noticias e marca no calendário. Assim que eu clicar eu vou para notícia!

  6. Estou trabalhando com 02 calendários para intervalos de datas mas não consigo fazer com quye o segundo sempre feche quando o primeito é alterado para evitar que o user coloque data de inicio maior que data final, quando a abertura do calendário tudo bem o problema é quando o cara clica em um dia e depois clica novamente e deixa o calendario aberto.

    Cod que tento poderia fechar quando no mouseOut

    $(‘#data_3’).focus(function() {
    window.setTimeout(“$(‘#data_8’).remove();”, 0);
    });

  7. Boa noite achei esse artigo fantastico mas não deu certo meu site esta sendo feito em php na parte donde o codigo fica preto aparece como texto e não como codigo o que pode ser ?

  8. Só faltou uma função callback com o valor para tipo fazer linkagens ou outros tipos de eventos né?

    Eu fiz uma adaptação se interessar tem meu email ae

    Abraço, otimo script =)

  9. Parabéns! estou usando e funciona perfeitamente.

    Gostaria de saber como fecho o calendário no mouse ou da data1 ou no focus da data2 tenho dois campos e como ele fecha no clique da pra por a data de inicio depois da dat final. como poderia contornar isto?C

  10. Otimo post, parabens pela iniciativa e pela qualidade.

    Gostaria de saber quanto clicar na data em outro input aparecer o dia da semana correspondente (Ex: segunda- feira, terça- feira …)

  11. Estou com a mesma dúvida do Elielton, alguem sabe como fazer isso “Quanto clicar na data em outro input aparecer o dia da semana correspondente (Ex: segunda- feira, terça- feira …)”

    Agradeço meus lindos

  12. Muito legal! Meus parabéns!!
    Mas tenho uma dúvida:

    É possível impedir a digitação diretamente no input? Isso impediria a inserção de caracteres inválidos.

    obrigado!

  13. parabens atualizei ela para a ultima versão do jquery, mas atualizei só a parte que precisei usar, vou refatorar e envio o código para vc. abraços

  14. Fiz tudo bonitinho, testando la no meu localhost, funcionou que é uma blz, mas qdo subi o sistema para o servidor web.. o calendário não funciona de jeito nenhum… alguém pode me ajudar ??

  15. Bom dia.
    Mto bom o script cara.
    Eu gostaria de saber como faço para inicializar o calendário sem precisar clicar no input. Abrir a página e ele já aparecer.

    Não consegui fazer no Jquery nem com onLoad.

    Obrigado.

  16. nao estou a conseguir por o calendario a abrir quando clico na texbox. alguem me dá uma ajuda de como fazer?
    cumps

  17. Tenho um formulário em PHP onde o usuário informa a data de início e fim.
    Gostaria de adicionar este recurso de calendário, porém dá erro.
    Sabe me informar se este recurso funciona com PHP?
    Desde já agradeço

  18. Danilo,
    Excelente dica!
    Não tenho muito experiência com jquery e queria saber se teria como os dias virem marcados, por exemplo, para dizer que uma data está reservada.

    As data reservadas estariam em um banco mysql.

    Desde já, muito obrigada!

  19. Olá, 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.

    Estou chamando ele assim:
    Como posso alterá-lo?

    A lista esta quase pronta.
    A data inicial dessa lista será hoje .
    Informe abaixo a data final para esta lista
    Obs.: Fique atento: data de vencimento da lista tem que ser superior à hoje.
    Caso contrário, você será redirecionado à essa página novamente!

    Grato se puder ajudar.

    Forte abraço.

    Carlos Rocha
    [email protected]

  20. já tentei, mas nao consegui meter. alguem consegue explicar de uma maneira mais simples?

  21. Olá,

    Gostaria de saber como faço para adicionar o calendário para exibição no site sem ser em um campo de formulário como foi descrito no post.

    Agradeço desde já!

  22. bom dia,
    estou tendo problema com ele de compatibilidade no IE 9 . firefox e chrome roda normal, mas no IE ele nao abre ao clicar no input.

  23. Oi. Usei seu calendário, que é mto legal e simples de usar, durante um bom tempo em minha aplicação, até que me foi reportado problemas de paridade entre o dia da semana e o dia do mês. Reparei que no internet explorer, existe uma diferença de 2 meses do calendário demostrado com o calendário real em relação aos dias da semana (ex: estamos em julho e os dias da semana que estão aparecendo são referêntes a maio).

    Enfim, espero estar postando a solução em breve, porém se vocês corrigirem isso (ou me indicarem um caminho para tal), será muito legal =D.

    Sucesso para vocês =).

  24. Pingback: Calendário em Javascript usando jQuery : BCSouza

  25. Está dando o segiunte erro:
    $(this).calendario is not a function
    target:’#data_1′
    Alguém teve esse problema?
    Obrigado.

  26. Danilo tenho uma duvida
    vou usar um calendário jquery para agendamento porem queria uma função para bloquear as datas passadas e atuais do dia vigente, pois quero que o cliente possa fazer o agendamento com o limite de 24 horas, então o dia atual e os que já passaram não poderão ser usados para agendar nada.
    pode me ajudar ?

  27. Parabéns pelo script, ficou ótimo! Tenho uma dúvida: preciso inserir uma navegação também para os anos (para o usuário marcar a data de nascimento dele), pode me dar uma força? Abraço

  28. Pingback: Calendário em Javascript usando jQuery | BCSouza

  29. Olá, o calendário é mto show, porém preciso fazer com que os dias anteriores ao dia atual não fique linkado. Eu tentei assim, mas consegui em partes, pois os meses anteriores e superiores também tiram os links baseado na data atual, vejam:

    if(i < diaAtual){
    $('#'+idCalendario+' ul.lista_dia').append("”+i+””);
    }else{
    $(‘#’+idCalendario+’ ul.lista_dia’).append(““+i+””);
    }

    grato!

  30. como abre isso no site? não entendo mt de javascript não identifiquei o arquivo “jquery-1.2.6.pack.js” alguém me ajuda plx

  31. Muito bom este calendário.

    Andei lendo os comentários, e vi que tem muita gente errando em coisas básicas do jquery, aconselho primeiramente vocês estudarem o jquery para só depois implementar seus plugins.

  32. Diego Says:
    March 16th, 2010 at 6:05 pm
    Muito Bom! agora eu só precisava que quando o usuário escolher uma data no calendário, após preencher o campo da data, ja chamar uma outra função.
    Existe alguma maneira de fazer isso com que ja existe hoje no plugin ou teria de implementar isso no js dele?

    ——-
    O plugin pelo visto não tem uma função callback. Mas vc pode chamar através do onblur
    $(“#data”).blur(function(){
    minhaFuncao();
    });

    _____________

    Ijacson Says:
    April 22nd, 2011 at 1:07 pm

    É possível impedir a digitação diretamente no input?

    —–
    Basta colocar o atributo readonly no seu imput.

  33. Ola pessoal tudo bem, achei o post muito bom, estou usando seu calendario e gostaria de saber como faco pra colocar um link na imagem do lado do input, para quando o usuario clicar na imagen tbm e abrir o calendário. tipo ele podera clicar na img do lado e tbm selecionar o input.

  34. Ola pessoal consegui colocar a url para na imagem para chamar o calendario so naum estou conseguindo falar ele jogar esse valor no input por favor me ajudem…. grato, estou usando o calendario do jqery mesmo….

Leave a Reply

Your email address will not be published. Required fields are marked *