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:

Datepicker

Você pode baixar os arquivos do exemplo clicando aqui!

Comentários

Postagens mais visitadas deste blog