Pensando nisso foram desenvolvidos plugins utilizando JavaScript e CSS para criar um calendário, normalmente a partir de um input do tipo Text. O principal pertence a biblioteca JQuery UI (User Interface), da própria JQuery Foundation. Ela fornece uma série de componentes como calendários, abas, botões e caixas de diálogos de fácil utilização.
Aqui veremos o componente DatePicke, que pode ser integrado, facilmente, a uma página com a referencia á JQuery UI e partindo de um input do tipo text, mas pode ser usado também em uma div.
Calendário com JQuery
Como base para o desenvolvimento iremos usar a seguinte estrutura em HTML.
Estrutura básica em HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Calendário</title>
</head>
<body>
<p>Data: <input type="text" id="calendario" /></p>
</body>
</html>
Neste exemplo o calendário é vinculado a um input mas pode ser colocado em uma div, da seguinte forma:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Calendário</title>
</head>
<body>
<div id="calendario"></div>
</body>
</html>
Mudou pouca coisa né?
Agora vamos a segunda parte, e muito importante, a referencia a biblioteca jQuery UI.
Nota: Esta referencia deve sempre ser colocada na pagina html principal.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
Feito isso, já podemos fazer o script que chamara o método DatePicker, de forma bem básica. Este script pode ser colocado antes da tag </head>, ou se você preferir pode criar uma pagina .js para colocar o script, porem neste segundo caso é necessário chamar a pagina inserindo a seguinte linha, junto com as bibliotecas.
<script src="js/calendario.js"></script>
Onde calendario é o nome da pagina onde esta o script.
E esse é o script:
<script>
$(function() {
$( "#calendario" ).datepicker();
});
</script>
Ele vai retornar um calendário em inglês, para traduzir para português, esse é o código:
$(document).ready(function (){
$("#calendario").datepicker({
dateFormat: 'dd/mm/yyyy',
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']
}
);
});
Aqui você já terá um calendário prontinho para ser usado no input ou na div, conforme for a sua necessidade.
O DatePicker possui, ainda, varias funcionalidades e você pode conhecer visitando a documentação oficial no site da JQuery UI em DatePicker Documentation.
Nenhum comentário:
Postar um comentário