Calendário JavaScript em 3 passos

Publicado por Devel Soluções em TI em 25/08/2010

[ Hits: 10.675 ]

 


Calendário JavaScript em 3 passos



Irei lhes passar como configurar um calendário em JavaScript para sua aplicação, como melhoria na utilização de um cadastro ou qualquer outro formulário.

Utilizaremos um projeto já existente do site dhtmlgoodies, e o primeiro passo será baixar o arquivo no link:
Descompacte-os 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. Insira o seguinte trecho de código dentro da tag head:

<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).

O terceiro e último passo é a inserção do calendário propriamente dito. No local onde irá implementá-lo (button, img etc), insira o seguinte código na ação desejada (onclick etc):

<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.
Linux: [DICA] Calendário JavaScript em 3 passos
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.

Outras dicas deste autor
Nenhuma dica encontrada.
Leitura recomendada

Campo obrigatório HTML + Javascript

Live Bookmarks no Firefox

Como recuperar uma senha salva no Chrome ou Firefox

Validar todo o form de maneira dinâmica

Selecionando todos os checkboxes a partir de um principal com JavaScript

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts