Calendário Simples em Javascript

4 05 2008

Saudações

Pessoal ontem fiquei muito puto da cara com todos os calendário em Javascripts que já foram escritos na face da Web, me irritei com o seguinte:

  1. Alguns tinhas imagens e CSS demais;
  2. Outros tinham JS monstros como por exemplo o jscalendar tem mais de 50K;
  3. Milhões de funções e configurações inúteis;
  4. Escrever um monte de JS para fazer o calendário aparecer no HTML;
  5. Nenhum era melhor do que a Grazi Nua (isca pros taradão de plantão)

Até que veio a luz, e eu encontrei esse cara aqui, o nome Clean Calendar já diz muito.

  1. Ele é pequeno somando o CSS e o JS dá 9K;
  2. Não usa imagens;
  3. Tem apenas as funções básicas, mas básicas mesmo, tendendo a quase nada :);
  4. O código é fácil de entender (boa legibilidade como diriam os informáticos);
  5. Fácil de inserir no HTML, basta setar a classe do campo como class=’calendarSelectDate e pronto!

O problema é que por ele ser simples não possui nenhum tipo de personalização, não da pra escolher por exemplo o formato da data, ou seja você tem que ir na mão e alterar o código JS, mas eu como sou camarada vou deixar a solução ali em baixo.

Em tempo, além da tradução, acrescentei duas funções que não existem na versão original:

  1. Caso o input já possua uma data o calendário abre com esta data selecionada;
  2. Coloquei um botão a mais que ao ser clicado seta o valor do campo com a data atual

Demonstração e Download

(esse link abre o meu novo blog)

Anúncios

Ações

Information

24 responses

7 08 2008
FLX

Opa… não consigo baixar o arquivo, aparece uma tela de login do WP 😦

7 08 2008
battisti

Opa verdade tava com o link errado corrigi já, valeu pela dica.

12 09 2008
wander

Olá Anselmo, tentei fazer o download do arquivo e não consegui, pode ser que eu esteja errando em alguma coisa, clico e aparece o endereço jpg, dai não consigo fazer nada, estou usando o firefox, necessito muito deste calendario simples.
Obrigado
wander

12 09 2008
battisti

então cara se tem que fazer o seguinte:
1 – Clica com o botão direito do mouse ali no link
2 – Salvar link como
3 – vai na pasta onde vc salvou o arquivo e renomeia de .jpg para .zip
4 – descompacta e boa

pq tudo isso??? pq no wordpress não da para anexar .zip 😦

4 10 2008
Guardião

amigo,
Este calendário não funciona no Fiferox 2.0
No Ie está funcionando certinho… mas no FF não aparece nada.

4 10 2008
battisti

Rapaz será que não é alguma outra coisa da tua página, pq aqui agente usa em vários sistemas e o FF é o nosso navegador padrão!

3 11 2008
Henrique

Meu velho, muito obrigado.
Você disse tudo no início do artigo, a maioria dos date picker que achamos na web tem 50kb de .js, 30 de css, pra q isso??? o.O

Tudo que eu tava procurando era algo simples!! Valew pela dica \o/
Como você bem disse: Compartilhar o código com os amigos faz bem.”

3 11 2008
Henrique

Já aproveitando, consegui implementar o calendario no sistema que estou desenvolvendo, e vou postar uma correção.

A parte do código, que estava comentada, referente ao OnBlur do input que tem o calendário, dá pra resolver o problema do calendario fechar antes de pegar a data colocando uma simples correção:


x[i].onblur = function(e){
if(document.getElementById(e.target.id).value != “”){
setTimeout(function(){ y.style.display = ‘none’; },100);
}
}

E novamente, esse calendário é 10!

4 11 2008
battisti

Valeu henrique, se chegou a testar em vários navegadores?

5 11 2008
Luiz Weber Scripts

Então.. A atualização do Henrique não funciona no IE.

Eu acho que a solução seria um observador na página ou um “on blur” na div que é criada.

Aaa e um bug que aparece com esta correção é que quando se clica para mostrar outro mês e o conteúdo do campo não está vazio, a div do calendario fecha.

Também estou tentando uma solução aqui.

Abraço

13 01 2009
Aprendiz de Feiticeiro

Meu brow esse lique do código so aponta para uma imagem !!!!

16 01 2009
battisti

então cara se tem que fazer o seguinte:
1 – Clica com o botão direito do mouse ali no link
2 – Salvar link como
3 – vai na pasta onde vc salvou o arquivo e renomeia de .jpg para .zip
4 – descompacta e boa

pq tudo isso??? pq no wordpress não da para anexar .zip 😦

22 01 2009
Flávio

Link quebrado 😦

22 01 2009
Flávio

Ops, entendi agora como fazer o download

24 01 2009
M Bastos

amigo, muito bom funciona perfeitamente … valeu pela codigo um abraco !!!

11 02 2009
Tabs

Velho, o script é excelente no IE, mas parece que não funciona no FF (pra variar). Uma pena.

11 02 2009
battisti

caraca mas eu uso só uso linux e funga no firefox, da uma revisada se não tem algum css conflitando!

5 06 2009
Soni

Olá Anselmo show de bola estava atras de um calendario porem somente encontrei uns mostruosos esse é super simples e muito funcional
Valeu

6 06 2009
battisti

Bacana :), fico feliz em ajudar, se fizer alguma modificação nele posta ai pra galera

16 06 2009
Thiago Przyczynski

Cara, muito obrigado mesmo!
Eu trabalho com programação PHP e estava justamente precisando de um script pra simplificar a interface de um cadastro de eventos, notícias e arquivos…
este post veio a calhar como nenhum outro antes havia acontecido…

vlw!

22 04 2011
Arthur Weber

Muito bom mesmo…
estou fazendo algumas mascaras aqui na unha e realmente detesto bibliotecas enormes

ja tinha visto um calendário parecido com esse ai mais faltava muita coisa

esse realmente esta otimo!

13 05 2011
paulo

escolhido o mes de agosto ou setembro ao clicar na textbox aparece mes indefinido. tem um bug. alguem o corrige

16 05 2011
paulo

popUpCal.selectedMonth = parseInt(inputObj.value.substr(3, 2),10) – 1;

6 03 2015
ilton barbosa

E como capturo o valor do campo em um POST[] ?

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: