Webpoint

Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.

por Alexandre Magno

Home
Contato

Categorias

Arquivos

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.

Exemplo do funcionamento do calendário deste post

Comentários

Assine o RSS para 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.

William Antônio Siqueira comentou:

24th Novembro, 2009 às 7:00 am

Me foi util, obrigado!

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