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:
2- Passo:
Inserir um campo de texto em nossa página HTML:
3 – Passo:
Agora vem a parte importante. Iremos definir que nosso input será um datepicker e adicionar todos os parâmetros de configuração:
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”
Veja o resultado final:
Você pode baixar os arquivos do exemplo clicando aqui!
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!
Comentários
Postar um comentário