Webpoint
Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.
por Alexandre Magno
Categorias
- Ajax
- Browser
- Bugs IE
- CSS
- Experiência do usuário
- Ferramentas
- Frameworks Js
- Javascript
- Jquery
- jQuery avançado
- jQuery UI
- Melhores práticas
- Mootools
- PHP
- Plugins
- Programas
- projetos jQuery
- Receitas CSS
- SEO
- SWFUpload e Jquery
- Usabilidade
- W3C
- Weblosofia
Arquivos
- Janeiro 2010
- Agosto 2009
- Julho 2009
- Junho 2009
- Abril 2009
- Março 2009
- Fevereiro 2009
- Janeiro 2009
- Outubro 2008
- Julho 2008
- Abril 2008
- Março 2008
- Janeiro 2008
- Novembro 2007
- Setembro 2007
- Agosto 2007
- Julho 2007
Links
- CSS para Webdesign
- A list apart
- Maxdesign
- Tableless
- Poisition is Everything
- Blog do tmferreira
- Pensamento Web
- Jquery Brasil
- Julio Greff
- Túlio Faria
- Rafael Marin
- Ajaxian
- Quirks mode
- Igor Escobar
- Pinceladas da Web
- Juareznjunior’s Weblog
- TidBits
- Tales Augusto
- Roberto Brasileiro
- Gabriel Zigolis
Calendário para jQuery em português
Postado em Junho 18th, 2009 por Alexandre Magno
Há um tempo atrás escrevi um post do plugin jCalendar em português. Ele é bastante visitado e gostaria muito de oferecer uma solução atual para este plugin usando o próprio jQuery. Muito tempo passou e atualmente existem soluções melhores para ter uma ferramenta de escolhas de datas. o jQuery UI veio como uma luva para unificar plugins de interface e um dos seus componentes é o Datepicker. Com ele, você pode configurar um calendário para funcionar no formato nacional apenas passando as configurações adequadas, sem modificar o core.
Para utilizá-lo, é necessário fazer o download no site do jQuery UI. Esta biblioteca de plugins possui vários outros plugins que irei tratar no futuro, portanto se for utilizar mais alguma por conta própria baixe o pacote completo, caso contrário somente o plugin datepicker e o core do jQuery UI.
Após inseri-lo no head do documento, basta ter um simples input referenciado de alguma forma, preferencialmente id, para que ele possa ser acessado via seletor do jQuery e assim inicializado como no exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>jQuery Date picker</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="calendario.js"></script> <link rel="stylesheet" type=text/css href="jquery-ui-1.7.2.custom.css" /> </head> <body> <form action="/" method="post"> <label for="calendario">Data:</label> <input type="text" name="calendario" id="calendario" /> </form> </body> </html>
O arquivo calendário.js contém o seguinte conteúdo:
$(function(){
$("#calendario").datepicker({
dateFormat: 'dd/mm/yy',
dayNames: [
'Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'
],
dayNamesMin: [
'D','S','T','Q','Q','S','S','D'
],
dayNamesShort: [
'Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'
],
monthNames: [
'Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro',
'Outubro','Novembro','Dezembro'
],
monthNamesShort: [
'Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set',
'Out','Nov','Dez'
],
nextText: 'Próximo',
prevText: 'Anterior'
});
});
Ao passar as configurações acima o calendário se torna totalmente formatado para a forma nacional, simplesmente passando estes parâmetros. Há outras formas de personalização, como a faixa de anos exibida e outras configurações que pode ser consultadas na documentação. Os itens do exemplo acima são bastante auto-explicativo.
O estilo pode ser personalizado no arquivo css que vem junto com o plugin e o jQuery UI tem conceito de temas. Você pode escolher um tema para ele que adeque mais a sua situação, tão bem como criar um personalizado apenas modificando o CSS.
Comentários
André comentou:
9th Julho, 2009 às 8:48 pm
Bem legal essa dica. Gostei mesmo, aguardando os próximos posts sobre JQuery UI.
George comentou:
16th Julho, 2009 às 11:57 am
Muito últil sua dica! Me ajudou d+.. pq aquele tal format “pt-BR” nao rola nem fudendo, hehe. Valeu!!!
Marcelo Romeu comentou:
25th Julho, 2009 às 2:22 am
Gostaria de saber como faço pra setar o tamanho que eu quero que esse calendario apareça?? tem como?? ja procurei na documentação e nao encontrei… desde ja agradeço.
Gabriel Lau comentou:
25th Julho, 2009 às 7:44 pm
Olá Alexandre… gostei muito desse aplicativo jQuery. Mas estou com uma dúvida…
Como eu poderia integrálo com o PHP(por exemplo) para fazer um tipo de “calendário de eventos” para poder marcar datas específicas neste calendário???
Eu sei fazer isso(teoricamente) mas com um calendário básico… sem nenhum efeito javascript…
Você pode me dar uma ajuda com isso??
Alexandre Magno comentou:
26th Julho, 2009 às 4:46 pm
@Marcelo: Realmente o plugin não possui opção de modificar largura, você terá que modificar via css.
@Gabriel: O plugin não foi feito para este propósito, no seu caso dê uma olhada neste plugin: http://arshaw.com/fullcalendar/
Marcelo comentou:
26th Julho, 2009 às 9:40 pm
copiei o seu exemplo, mas o meu calendario me parece tao grande e o seu tao pequeno… pq sera essa diferença no tamanho?
Alexandre Magno comentou:
26th Julho, 2009 às 9:53 pm
@Marcelo: Por favor, verifique algum conflito de css. O tamanho da fonte do calendário é relativo ao tamanho base da fonte do site. Verifique o CSS do site em que ele está sendo inserido ou modifique o css do calendário para adaptar suas necessidades. Espero ter ajudado, boa sorte…
Ademir Bastiani comentou:
1st Agosto, 2009 às 9:56 am
Ola, estou tentando colocar o calendario no meu form mas o mesmo não funciona,
ou no form não pode ter action”/”
faço tudo igual esta na explicação mas não carrega nada
Ademir Bastiani
Floripa..
Juarez P. A. Filho comentou:
2nd Agosto, 2009 às 2:16 pm
Valeu por ter deixado esse código pronto. 
Eu gostaria de saber se tem como deixar esses valores para todos calendários que eu tiver no site, pois geralmente utilizo calendários em diversos lugares, daí ter que ficar duplicando esse código fica ruim. Teria alguma solução?
Uma dica legal é colocar aquele campo de poder ser avisado de novos comentários nos artigos, pois assim eu seria avisado quando você respondesse, portanto teria como enviar para meu e-mail a resposta também? Grato!
Alexandre Magno comentou:
3rd Agosto, 2009 às 10:43 am
@Ademir: Somente com estas informações não tenho certeza o que pode ter acontecido. Possíveis possibilidades:
Se não tiver dando erro de script, css do plugin não carregado ou o proprio plugin nao estiver sido carregado. Se estiver dando erro, o jQuery ou o plugin não está sendo carregado. Se você usar o firebug, você pode olhar se algum arquivo não está sendo carregado. Espero ter ajudade e boa sorte…
Alexandre Magno comentou:
3rd Agosto, 2009 às 10:48 am
@Juarez: Olá Juarez, para isto você pode usar o setDefaults que irá carregar por padrão as opções passadas para este métodos em todas as instâncias do datepicker:
http://docs.jquery.com/UI/Datepicker/setDefaults
Em relação a dica, estou abandonando o blog atual, estou trabalhando em uma nova versão e reformulando e revendo diversos items, muito obrigado pelo feedback, irei colocar esta feature com certeza, pois sei o quanto é útil! Mas até lá eu sempre respondo as dúvidas no momento que aprovo os comentários, então você pode assintar o rss para comentários
Valter comentou:
17th Agosto, 2009 às 5:50 pm
Cara, simplesmente muuuuito bom o seu post, nunca imaginei que pudesse ser tão fácil ter um calendário tão bonito.
Brigadão mesmo.
Alexandre Magno comentou:
17th Agosto, 2009 às 7:27 pm
@Valter: Que ótimo que post pôde te ajudar a descobrir o Datepicker para o jQuery UI
Willian comentou:
28th Setembro, 2009 às 2:06 am
Depois de alguns testes, vou colocar a dica pra quem quer diminuir o tamanho do calendário. Está no arquivo jquery-ui-1.7.2.custom.css, na linha 51 (de acordo com o Dreamweaver).
Altere onde diz: “font-size: 1.1em;”
Eu alterei para 0.7 e achei um tamanho bom. Mas façam os testes ae…
Obrigado pela dica, não conhecia esse calendário.
Cassio comentou:
15th Fevereiro, 2010 às 11:21 am
Muito bom o POST, estou tentando integrar o “Datepicker” com um campo de meu sistema, mas não estou tendo sucesso nos resultados, tem alguma dica para interagir com campos dinâmicos?
Obrigado
Alexandre Magno comentou:
16th Fevereiro, 2010 às 10:10 pm
@Cassio: A dica e aplicar o datepicker no momento em que são gerados os campos dinâmicos…
Fábio F. comentou:
10th Março, 2010 às 1:00 pm
Excelente POST Alexandre 
Funcionou à 1ª, mas tenho aqui um problema não sei se é so meu mas quando tento ter varios calendarios na mesma pagina só aparece o 1o, não sei do que pode ser… :S
Obrigado
Alexandre Magno comentou:
12th Março, 2010 às 9:50 pm
@Fábio: Muito estranho verifique se você está passando os seletores corretamente. Abraços e boa sorte.
Fábio F. comentou:
15th Março, 2010 às 5:45 am
Já deu, o problema era da passagem das variaveis que não estava a ser bem feito..
Leonardo comentou:
6th Abril, 2010 às 3:14 pm
Muito bom!!!!! Gostei muito!!!! Vou aproveitar no meu site!!!! Obrigado por postar!!!!
marco comentou:
15th Abril, 2010 às 4:23 pm
Adorei o post, mas como eu colocaria dois calendarios na mesma página EX: data de entrada e data de saida. O script só permite um
Alexandre Magno comentou:
15th Abril, 2010 às 8:48 pm
@Marco: Se você passar uma classe para o campo e chamar o datepicker para estes campos ele irá funcionar em todos que estiver com a classe escolhida. Espero ter ajudado e boa sorte.
Gabriel comentou:
24th Maio, 2010 às 4:48 pm
Muito bom. vc pode usar o calendario.js na propria pg
André comentou:
29th Maio, 2010 às 4:24 pm
Colega, a página ta carregando muito bem…..só que no banco de dados fica em branco…..porque será?
Cyro comentou:
9th Junho, 2010 às 3:42 am
Muito bom o Calendário! Funciona perfeitamente! Agora uma dúvida: Como faço para tornar datas quaisquer, em datas especiais, de eventos por exemplo, que fiquem de repente em Bold com outra cor, e que ao passar o mouse apareça o nome do evento, ou de repente se torne um link para a página do evento dentro do site. É muito complexo?
Obrigado!
Alexandre Magno comentou:
9th Junho, 2010 às 1:32 pm
@Cyro: Este não é o objetivo deste plugin, ele é somente para escolher data, como o próprio nome diz e ele somente destaca a classe corrente. Para este fim mais complexo talvez o http://arshaw.com/fullcalendar/ atenda melhor sua necessidade. Abraços e boa sorte…
Kassia comentou:
25th Junho, 2010 às 3:30 pm
Pra quem precisa diminuir o tamanho do calendário, ai vai uma dica:
1) /* Component containers */: Pode ser mudado o tamanho da fonte do titulo do mês; Acrescentando (font-size:14px) nessa linha:
.ui-widget-header { border: 0px solid #06d4ae; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500×100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; font-size:14px}
2) Tamanho do calendário pode ser ajudado na linha de comentário: /* Datepicker */
Bom, sou muito leiga em CSS, mas espero que isso possa ajudar!
Abraços!
Alexandre Parabéns pelo POST! Muito bem explicado e bem usual!!!!
Continue assim!
Sucesso!
Felipe comentou:
4th Julho, 2010 às 11:43 am
Por favor, gostaria de uma ajuda já que não sou muito bom em JS..
O que devo fazer se precisar usar dois calendários na mesma página? Por exemplo.. preciso selecionar a data inicial e data final. Preciso fazer duas funções uma para cada calendário ou posso usar uma função única?
Alexandre Magno comentou:
5th Julho, 2010 às 4:55 pm
@Felipe: Quando você usa $(’seletor’).datepicker() você está passando os seletores que serão aplicados o calendário. Se por exemplo você colocar uma classe chamada calendário nos inputs onde o plugin será aplicado, basta chamar $(’.calendario’).datepicker(). Espero ter ajudado e boa sorte.
gederson comentou:
14th Julho, 2010 às 2:22 pm
alexandre tambem estou com a mesma duvida do felipe
poderia explicar novamente nao entendi.
que colocar dois calendario como fazer sendo um data inicial e final tenho que fazer classes ou nao é necessario?
valeu obrigado
Alexandre Magno comentou:
15th Julho, 2010 às 4:42 pm
@gederson: Isto não é uma dúvida do plugin e sim do jQuery, pois esta é a forma padrão de como todos agem. Se você utilizar $(’input’).datepicker() todos os inputs serão iterados e os eventos referentes ao plugin são registrados em cada campo. Se você atribuir uma classe e chamar $(’.nomedaclasse’).datepicker() todos campos com a classe nomedaclasse terão um datepicker. Dá uma estudada nos seletores, é difícil conseguir explicar sem saber seu nível em jQuery.
Deixe seu comentário
Os seguintes campos estão incorretos ou faltando
- Listagem dos campos faltando
