Calendário no formulario

É verdade que existem vários calendários em javascript, misturando dhtml e ajax por ai. Alguns pagos, a maioria grátis.

Mas um dos mais legais e fáceis de usar com certeza é o dhtml_goodies. Vamos ver como em poucos minutos seus formulários ficarão mais ricos usando esta ferramenta gratuita.

Comece fazendo o download da API no site oficial da dhtml_goodies.

Descompacte o arquivo e coloque na sua aplica̤̣o os arquivos: dhtmlgoodies_calendar.js Рdhtmlgoodies_calendar.css Рimages (pasta com as imagens).

Na página que irá exibir o calendário inclua as linhas abaixo para importar o código:

<LINK type=”text/css” href=”WEB/js/calendar/dhtmlgoodies_calendar.css” rel=”stylesheet”>

<SCRIPT type="text/javascript" src="WEB/js/calendar/dhtmlgoodies_calendar.js"></SCRIPT>

Considerando que existe as pastas “WEB/js/calendar/“, caso contrário substitua o caminho pelo da sua aplicação.
E pra finalizar (já!?) basta usar o comando no seu button e esta feito seu calendário.

<input type="text" name="data" id="data">

<input type="button" name="btn" value="selecionar" 

onclick="javascript:displayCalendar(document.getElementById('data'),'dd/mm/yyyy hh:ii',this,true);">

Veja como fica o resultado: demo

Você ainda conta com diversas opções de configuração de calendário, no arquivo js você ainda pode alterar o idioma para pt_BR, e alterar outros detalhes do conteúdo.

Não tem mistério, simples assim, mãos a obra!