[DICA] Calendário Javascript em 3 passos
Irei lhes passar hoje como configurar um calendário em JavaScript para sua aplicação. Podendo ser utilizado como melhoria na utilização de um cadastro ou qualquer outro formulário.
Bom, para criarmos, utilizaremos um projeto já existente do site dhtmlgoodies, então o primeiro passo será baixar o arquivo no link: Calendar scripts, depois descompacte os arquivos no diretório de seu sistema.
Vamos então ao segundo passo: a inserção do código do calendário em sua página. Abra-a e, dentro da tag head, insira o seguinte trecho de código:
Código :
<head>
<link type="text/css" rel="stylesheet" href="./dhtmlgoodies_calendar/dhtmlgoodies_calendar/dhtmlgoodies_calendar.css?random=20051112" media="screen"></link>
<script type="text/javascript" src="./dhtmlgoodies_calendar/dhtmlgoodies_calendar/dhtmlgoodies_calendar.js?random=20060118"></script>
</head>
Este código é o responsável por carregar os arquivos de css e as bibliotecas utilizadas no calendário (as propriedades href e src são os endereços de onde você descompactou os arquivos do dhtmlgoodies).
Agora, o terceiro e último passo, a inserção do calendário propriamente dita. No local onde irá implementar o calendário (button, img, etc), insira o seguinte código na ação desejada (onclick, etc):
Ex:
Código :
<input type=”text” onclick=”displayCalendar(document.forms[0].data1,'dd/mm/yyyy',this)” name=”data1” />
Este código chamará o evento para exibir o calendário e retornará a data selecionada no input que descrevermos, lembrando que o input deve estar dentro de um form.
O "dd/mm/yyyy" é a formatação desejada da data retornada e "this", significa que, caso o input já tenha alguma data, quando abrir o calendário, a data marcada será a mesma do value.
http://a.imageshack.us/img697/1950/calendariokc.png
Pronto, com estes simples passos, você acaba de implementar em sua aplicação um calendário JavaScript!
Créditos ao nosso colaborador Yuri Zanola Piratello, pelo tutorial.
