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.
Danilo é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, poker, vendo futebol e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, rails, javascript, xhtml, css, jquery, webstandards, seo, sql, opensocial, etc. E já fez sites para espn, fiat, fila, umbro, fgv, gatorade, petrobras, etc. Veja o 
Belinha agora é arquiteta de informação na RMG Connect, está cozinhando melhor, mas postando cada dia menos... ainda assim, sempre que dá aparece aqui no TidBits para dar seus pitacos sobre desenvolvimento... (Belinha é casada com o Danilo)
February 19th, 2010 at 11:22 am
Excelente!!!
February 25th, 2010 at 7:49 pm
Otimo calendario!
February 26th, 2010 at 7:16 pm
Muito bom! Parabéns.
Tem alguma forma de bloquear o click no Domingo por exemplo?
Abraços
March 14th, 2010 at 3:46 pm
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.
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?
Obrigado!
March 24th, 2010 at 2:31 pm
Boa tarde Danilo, há alguma configuração para se escolher varios dias e estes ficarem salvos ao mudar de mes/ano??
April 9th, 2010 at 3:26 pm
fantastico post! completissimo está de parabéns. Já adcionei em meus favoritos, rsss
August 4th, 2010 at 11:07 am
Realmente muito bom e bem mais simples de utilizar em relação a alguns modelos disponíveis na internet.
Aparentemente mais limpo.
August 6th, 2010 at 10:15 am
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!
August 16th, 2010 at 12:45 pm
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);
});