Client-Side: HTML CSS JavaScript

É muito comum no nosso dia-a-dia de desenvolvedor client-side nos depararmos com a situação de construir um formulário que tenha um campo de data. Pensando nisso estou escrevendo este artigo para lhe mostrar como formatar um campo de data de um formulário corretamente.

O primeiro passo é claro é você escrever o código fonte do formulário. Veja o exemplo abaixo:

<input type="text" id="data" name="data" size="30px" maxlength="10" />

Ainda no documento HTML você vai ter que inserir alguns códigos na seção head. Veja o exemplo abaixo:

<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.1.4.pack.js"></script>
<link rel="stylesheet" href="js/jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css" type="text/css" media="all" />

No código acima você pode perceber que foi incluído algumas bibliotecas no documento HTML. Estes arquivos você pode fazer o download no final deste artigo no link “VER EXEMPLO”

Agora você deve começar a usar o framework jquery em conjunto com o jqueryUI que foi incluído no documento anteriormente. Para isso você precisar incluir mais uma vez na seção head do documento o seguinte código:

<script>
$(function() {
//Aplicando a interface do datepicker
$( ".datepicker" ).datepicker({
showOn: "button",
buttonImage: "js/jqueryui/css/ui-lightness/images/calendar.gif",
buttonImageOnly: true
});

// CONFIGURAÇÃO DO DATEPICKER DO JQUERYUI PARA PT-BR
$.datepicker.setDefaults({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'
});

//Aplicando uma máscara o campo de data
$(".datepicker").mask("99/99/9999");

});
</script>

Veja aqui o exemplo completo funcionando: VER EXEMPLO

Tags: data, datepicker, formulários, jQuery, jquery-ui, jqueryui, maskedinput, PT-BR