# Click Calendário - Plugin de calendário para jQuery

Este, é um plugin de jQuery, para calendários, desenvolvido por Danilo Augusto.

## 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'
    	});
    });

## 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
    	});
    });

## 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
    	});
    });

## 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()
    	});
    });

## 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'
    	});
    });

## Exemplo com range de Data

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'
    	});
    });