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 é coordenador de interface da AdBat/Tesla, é Corinthiano e Vegan. Gosta de correr, de jogar xadrez, tênis, e futebol de videogame (no futebol de verdade ele é muito ruim). Programa de dia na AdBat/Telsa e de noite no 
January 22nd, 2012 at 4:49 pm
Ola,
Estou tentando usar com 2 campos de datas aonde quando selecionado o valor data1 a segunda aceita apartir dessa data, tudo certo. Mas gostaria que se clicasse na data1, sempre o calendario da data2 fechasse, e vice-versa. Tentei usar no blur $(‘#data1′).remove(), como alguns disseram, mas nesse caso fecha o input da data1 e não o calendário, algume pode me ajudar?
January 26th, 2012 at 8:30 am
Em primeiro lugar, parabens pelo script, simplesmente showww!
Preciso usar duas datas, como faço para transferir o valor da primeira data para a segunda?
Pois assim, o valor inicial da data2 seria o valor da data1.