daterangepicker pt-br

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:



Você pode baixar os arquivos do exemplo clicando aqui!