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:
[sourcecode language="html"]
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.
[sourcecode language="html"]
/* Javascript */
$(’#data_1′).focus(function(){
$(this).calendario({
target:’#data_1′
});
});
[/sourcecode]
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
[sourcecode language="html"]
/* Javascript */
$(’#data_2′).focus(function(){
$(this).calendario({
target:’data_2′,
top:0,
left:130
});
});
[/sourcecode]
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;
[sourcecode language="html"]
/* Javascript */
$(’#data_3′).focus(function(){
$(this).calendario({
target:’data_3′,
closeClick:false
});
});
[/sourcecode]
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.
[sourcecode language="html"]
/* Javascript */
$(’#data_4′).focus(function(){
$(this).calendario({
target :’#data_4′,
dateDefault:$(this).val()
});
});
[/sourcecode]
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.
[sourcecode language="html"]
/* 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’
});
});
[/sourcecode]
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
[sourcecode language="html"]
/* Javascript */
$(’#data_6′).focus(function(){
$(this).calendario({
target :’#data_6′,
dateDefault:$(this).val(),
minDate:’10/11/2008′,
maxDate:’25/01/2009′
});
});
[/sourcecode]
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