Uma coisa muito útil que graças ao JQuery se torna muito fácil é um Datepicker.

Que nada mais é que um campo de texto que ao ser clicado, abre um calendário para podermos escolher uma data.

 1 – Passo:

Faça o download da biblioteca do JQuery na página: http://jqueryui.com/.

Após isso, vamos inserir as bibliotecas e o CSS padrão na nossa página:

1
2
3
4
5
<link href="css/redmond/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

2- Passo:

Inserir um campo de texto em nossa página HTML:

1
<input id="datepicker" type="text" />

3 – Passo:

Agora vem a parte importante. Iremos definir que nosso input será um datepicker e adicionar todos os parâmetros de configuração:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(document).ready(function(e) {
    $("#datepicker").datepicker({
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        dateFormat: 'dd/mm/yy',
        nextText: 'Próximo',
        prevText: 'Anterior'
    });
});
</script>

Na linha 3 definimos pelo ID qual seria o elemento que iria ser um datepicker, e nas linhas seguintes definimos todas as suas propriedades. Os nomes das propriedades são bem autoexplicativas. Qualquer dúvida, sempre bom recorrer a documentação do Jquery.

Para facilitar a vida, você pode fazer download do Jquery já com um tema, entrando na página http://jqueryui.com/themeroller/ você irá encontrar diversos temas para serem baixados.

Por padrão, o datepicker fica um pouco grande, para mudar isso basta ir no arquivo CSS e mudar o tamanho da fonte da classe “ui-widget”

1
2
3
4
.ui-widget {
    font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    font-size: 12px;
}

Veja o resultado final:

Datepicker

Você pode baixar os arquivos do exemplo clicando aqui!