Boteco Digital

jQuery UI datepicker em Português

Um dos plugins mais interessantes do jQuery é o jQuery UI, na verdade é um conjunto de plugins de interface combinado com Temas CSS que deixa seus sistemas web bem mais interessantes.

Um dos “módulos” que mais gosto deste plugin é o datepicker, que para quem não sabe é aquele “calendariozinho” que aparece abaixo de um campo de formulário para selecionarmos uma data.

Para utilizar o plugin você baixá-lo e para isso deve selecionar quais módulos do UI deseja utilizar.

Após escolher os módulos e baixar, descompacte e inclua os arquivos Javascript e CSS em seu documento HTML

<link type="text/css" href="css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>

Agora o jQuery o método datepicker que adiciona o “calendariozinho” ao campo selecionado quando este for focado. Mas como este plugin é em inglês devemos configurar os nomes dos meses, dias e formato de data como esta baixo.

 $(".data").datepicker({
	dateFormat: 'dd/mm/yy',
	dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
	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'
});

Veja o exemplo aqui

PS.: Caso você não saiba o campo de formulário com datepicker(input type=”date”) foi inserido no HTML5 mas eu ainda acho que vai demorar um pouco para podermos utilizarmos ele livremente pois a maioria dos navegadores não o implementa ainda, enquanto isso o jQuery UI é um ótima alternativa.

Categorias JQuery Web
comments powered by Disqus