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.