Calendário com JQuery
Apesar de estar para fazer meu primeiro post a tempos, eu somente consegui agora, falta de tempo.
Como muita gente não sabe como utilizar um calendário ligado input text, vou explicar como utiliza-lo usando um plugin para o JQuery, lembrando que existem diversos outros modelos sem o uso do JQuery e com o uso, essa é uma sugestão minha pois para com a qual eu estou utilizando em meus sistemas (digo da empresa) e tenho gostado muito do resultado, bastante clientes estão usando sem ter problemas.
Antes de mais nada a página official do plugin, para que possam fazer os downloads dos arquivos necessários. Ele tem diversas funções como data em formato dd/mm/aaaa, andar (escolher) entre meses, andar entre anos e com o click trazer a data escolhida.
Otimo, imaginando que você ja baixou o arquivo jquery-calendar.js basta você chama-lo do mesmo modo que o Jquery, então basta colocar o código abaixo em sua página, dentro do (document).ready:
$(”input[@name=nome_do_input]”).calendar({
autoPopUp: ‘button’,
clearText: ‘Limpar’, //Nome do botao limpar
closeText: ‘Fechar’, //nome do botao fechar
prevText: ‘<Ant’, // nome do botao anterior
nextText: ‘Prox>’, //nome do botao proximo
currentText: ‘Hoje’, //nome do botao hoje
dayNames: new Array(’Dom’,'Seg’,'Ter’,'Qua’,'Qui’,'Sex’,'Sab’), // Array com dias da seman
monthNames: new Array(’Jan’,'Fev’,'Mar’,'Abr’,'Mai’,'Jun’,'Jul’,'Ago’,'Set’,'Out’,'Nov’,'Dez’), //array com os nome dos meses
speed: ‘fast’, //velocidade de abertura
buttonImageOnly: true, //apresentar botao somente na img
buttonImage: ‘imagens/calendar.gif’, //nome da img e local onde vai abrir o click para o calendario
buttonText: ‘Calendario’ //nome do botao
});
Basta agora configurar o Jquery.calendar.css para que esteja com as cores, tamanhos e tudo ao seu gosto e voalá, esta pronto para o uso, caso necessite existem muitas outras opções e configurações, basta ler o manual, o primeiro passo ja foi dado.
Escrito por: silici0 . Rafael Cunha
Sitio: http://www.rafaelcunha.com
6 Comentários
Jump to comment form | comments rss [?] | trackback uri [?]