Este, é um plugin de jQuery, para calendários, desenvolvido por Danilo Augusto.
| 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 | '' |
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.
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'
});
});
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
});
});
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
});
});
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()
});
});
É 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'
});
});
Nos parâmetros minDate e maxDate é possível definir uma range para a navegação do calendário
<!-- 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'
});
});