Galera.
Neste primeiro post vou falar sobre o componente de calendário, JS Calendar. O JS Calendar foi desenvolvido pela DhtmlGoodies.com em JavaScript. Para ver um exemplo do calendário, clique aqui.
Conhecendo o JS Calendar
Primeiramente, faça o download do JS Calendar no sítio da desenvolvedora. Ao descompactar, veremos dois arquivos e dois diretórios:
arquivo lgpl.txt - licença de uso do JS Calendar
arquivo js_calendar.html - exemplo do JS Calendar
diretório images – com imagens do exemplo e do calendário
diretório dhtmlgoodies_calendar - onde encontraremos o javascript e o css
Construindo uma página com o calendário
Vamos criar uma página em branco (html).
Após criar esta página em branco, entre as tags <HEAD> e </HEAD> insira o texto abaixo:
<title>Teste de Calendario</title>
<!– Título do Sítio –><link type=”text/css” rel=”stylesheet” href=”dhtmlgoodies_calendar.css” media=”screen”></link>
<!– Referência ao css utilizado no calendário –><script type=”text/javascript” src=”dhtmlgoodies_calendar.js”></script>
<!– Referência a biblioteca de funções utilizada no JS Calendar –>
Entre as tags <BODY> e </BODY> inclua o texto abaixo:
<form>
Data: <input type=”text” value=”" readonly name=”campoData”><br>
<!– Campo do tipo texto, apenas como leitura. O usuário não poderá digitar a data diretamente no campo. Isso evita erros de digitação. –><input type=”button” value=”Calendário” onclick=”displayCalendar(document.forms[0].campoData,’dd-mm-yyyy’,this)”>
<!– Botão com nome Calendário com a função displayCalendar sendo chamada pelo onclick. Importante citar que no document.forms[0].XXXXX, XXXXX é o nome do campo onde receberá o valor escolhido no calendário –>
</form>
Grave o arquivo como testeCalendario.htm e faça um teste clicando sobre o botão “Calendário”
Para mudar o formato da data, altere o terceiro parâmetro da função displayCalendar que neste exemplo está como dd-mm-yyyy.
Para ver este exemplo acima funcionando, clique aqui.
Fico por aqui.
Até o próximo post.
Abraços.
Bruno Amaral