Resolvendo problemas de datas através de calendario dinamico
Bom galera, eu tenho visto ultimamente muitos sites principalmente de bancos que ao invez de ficarem formatando e validando datas, passaram a utilizar um calendário permanente. É muito prático e evita erros de validação. Eu procurei deixar prático e fácil a sua implementação porém ainda é possível parametrizar ainda mais...
1) Criei um calendário dinâmico todo em javascript já com seus divs necessários e basta carregá-lo no arquivo inicial ou arquivo que vai utilizá-lo.
2) Definir os parametros no seu arquivo de style ou se preferir, crie um arquivo separado somente para o calendário e ajuste as posições desejadas para onde ele deve aparecer.
abaixo os códigos e exemplo de uso:
1) calendario.js - carregue na pagina que precisa do calendario:
<script language="javascript" type="text/javascript" src="js/calendar.js"></script>
/* 3-month calendar script- Ada Shimar (adashimar@chalktv.com) script featured on and available at: [[http://www.javascriptkit.com/](http://www.javascriptkit.com/)](http://www.javascriptkit.com/%5B/url%5D) adaptado do script acima por LAB DESIGN: dez/06*/// toda a formatacao da tabela virá do arquivo style.css// função que gera o calendariovar LastMonth=0;var LastYear=0;var dateRangeIn; // essa var por ser utilizada para implementar um check de range junto com o out.var dateRangeOut;var dateFieldId;sysMonth = new Array("January","February","March","April","May","June","July","August","September","October","November","December");Meses = new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro");Week = new Array('D','S','T','Q','Q','S','S');// data atualhoje = new Date();mesAtual = hoje.getMonth();anoAtual = hoje.getYear();minimo = mesAtual;maximo = mesAtual-1;mesAnterior = mesAtual - 1;if (mesAnterior < 0) mesAnterior=11;if (anoAtual < 2000) // Y2K Fix, Isaac Powell anoAtual = anoAtual + 1900;var yr = yr1 = (mesAtual==0 ? anoAtual-1 : anoAtual); // last month´s yearvar mo = mesAtualvar dataInicial, dataFinal;// o nome do class é calendar portanto não utilizar este nome como nome de form ou de campo para evitar conflitos.var calendar= { setRange: function (dateIn, dateOut) { dateRangeIn = dateIn; dateRangeOut = dateOut; }, go: function(offSet) { // voltar if (offSet == -1) { if (yr > anoAtual-1) { if (mo > 0) mo--; else { yr = yr1 = anoAtual; // passa para o ano corrente mo = 11; // seta dezembro } } // if (yr==anoAtual) else { // ja ta no ano atual if (mo > minimo) mo--; else { alert("fim do período disponível"); return; } } } // if (offSet == 1) // avançar if (offSet == 1) { if (yr==anoAtual) { if (mo < 11) mo++; else { yr = yr1 = anoAtual+1; // passa para o ano seguinte mo = 0; // seta janeiro } } // if (yr==anoAtual) else { // ja ta no ano seguinte if (mo < maximo) mo++; else { alert("fim do período disponível"); return; } } } // if (offSet == 1) calendar.show(); }, show: function () { var jHTML; novoMes = new Date(sysMonth[mo]+ " 1," + yr1); // assign to date brancos = novoMes.getDay(); // dias inexistentes yr = eval(yr); maxDay = 31; if (mo ==1) { maxDay=28; if (yr % 4 == 0) maxDay=29; } else if (mo==3 || mo==5 || mo==8 || mo==10) maxDay=30; // alert('mo='+mo+' dias='+idxMes[mo]); document.getElementById('mes').innerHTML = Meses[mo] + " " + yr; jHTML='<table border="0" width="100%" align="center"/><tr>\r\n'; // imprimi o nome dos dias da semana for (var i = 0;i < 7; i ++) jHTML += '<td id=diasSemana>'+ Week[i]; // primeira semana jHTML += '<tr>\r\n'; dia = 0; for (var i = 0; i < 7; i++) { if (i < brancos) jHTML +='<td id="dia"> '; else { dia++; if (dia < 10) jHTML +='<td id="dia"><a href="java script:void(null)" onclick="calendar.setField('+dia+')">0'+ dia +'</a>'; else jHTML +='<td id="dia"><a href="java script:void(null)" onclick="calendar.setField('+dia+')">'+ dia +'</a>'; } } // demais semanas while (dia < maxDay) { jHTML += '<tr>\r\n'; for (var i = 0; i < 7; i++) { dia++; if (dia > maxDay) jHTML += '<td id="dia"> '; else if (dia < 10) jHTML += '<td id="dia"><a href="java script:void(null)" onclick="calendar.setField('+dia+')">0' + dia +'</a>'; else jHTML += '<td id="dia"><a href="java script:void(null)" onclick="calendar.setField('+dia+')">' + dia +'</a>'; } } jHTML += '</table>'; // remove a div anterior com o mes var dvMes = document.getElementById('calendar'); var dvDias = document.getElementById('dias'); if (!dvDias) { dvDias = document.createElement('DIV'); dvDias.id='dias'; dvMes.appendChild(dvDias); } dvDias.innerHTML = jHTML; }, open: function(id) { div=document.getElementById('dvCalendar'); dateField=document.getElementById(id); div.className="visivel"; calendar.show() }, setField: function(d) { if (d < 10) d='0'+d; var mes=eval(mo+1); if (mes < 10) mes='0'+mes; dateField.value=d+'/'+mes+'/'+yr; calendar.close(); }, close: function() { div=document.getElementById('dvCalendar'); div.className="invisivel"; } }CSS necessários: Eu uso junto com arquivo de css principal pois chamo de várias paginas mas se preferir pode criar um arquivo único para o calendario pra nao confundir com os outros arquivos de css..visivel { display:inline; } .invisivel { display:none; }/ calendario /#dvCalendar { float:left; position:absolute; top:220px; left:800px; width:154px; _width:156px; height:146px; margin-top:2px; margin-bottom:2px; border-top:1px solid #efefef; border-left:1px solid #efefef; border-right:2px solid #404040; border-bottom:2px solid #404040; text-align:center; background:#e4e4e4; } #topCalendar { margin-top:2px; margin-left:2px; padding-right:4px; width:auto; height:auto; text-align:center; background:#336699 } #prev, #next, #icClose { float:left; width:14px; height:auto; text-align:center; }#icClose { float:right; } #mes { float:left; border-top:1px solid #808080; border-right:1px solid #c0c0c0; border-left:1px solid #808080; border-bottom:1px solid #c0c0c0; width:104px; _width:104px; height:18px; text-align:center; font: bolder 8pt Arial, Helvetica, Verdana, Tahoma, sans-serif; background:#404040; color:#fff; }#calendar { width:152px; _width:158px; height:auto; padding:1px; text-align:center } #dias { float:left; width:auto; height:110px; text-align:center; font: 8pt Arial, Helvetica, Verdana, Tahoma, sans-serif; }#diasSemana { border-top:1px solid #404040; border-right:1px solid #efefef; border-left:1px solid #404040; border-bottom:1px solid #efefef; text-align:center; font: bolder 8pt Arial, Helvetica, Verdana, Tahoma, sans-serif; background: #404040; color:#ffffff; width:20px } #dia { width:18px; text-align:center; font: 8pt Arial, Helvetica, Verdana, Tahoma, sans-serif; border-bottom:1px solid #000; border-right:1px solid #000; }#dia a { width:18px; font: 8pt Arial, Helvetica, Verdana, Tahoma, sans-serif; text-decoration:none; }#dia a:hover { width:18px; text-weight:bolder; background:#c40000; color:#fff; }Agora finalmente como deve ser criado: Eu uso sempre no index e neste caso não criei um layer mas um div escondido.
<html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <link type="text/css" rel="stylesheet" media="screen" href="css/style.css" /> <script language="javascript" type="text/javascript" src="js/anima.js"></script> <script language="javascript" type="text/javascript" src="js/ajax.js"></script> <script language="javascript" type="text/javascript" src="js/checkForms.js"></script> <script language="javascript" type="text/javascript" src="js/calendar.js"></script> <script language="javascript"> function MM_preloadImages() { var d=document; if(d.images) { if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i = 0; i < a.length; i++) if (a[i].indexOf("#") != 0) { d.MM_p[j]=new Image; d.MM_p[j++].src=a[i]; } } } </script> <title>Home</title> </head> <body onload="MM_preloadImages('images/open.gif','images/close.gif')"> <div id="dvTudo"> <div id="dvHome1"></div> <div id="dvHome2" style="background:url(images/home.jpg)"> <div id="dvMenu" style="background:none"> </div> <div id="dvContent"> <script>ajaxLoader('mws_login.php')</script> </div> </div> <div id="dvHome3"> <map name="FPMap2"> <area href="java script:ajaxLoader('', 60)" shape="rect" coords="19, 26, 125, 98"> <area href="java script:ajaxLoader('', 72)" shape="rect" coords="144, 28, 249, 97"> <area href="java script:ajaxLoader('', 71)" shape="rect" coords="265, 29, 366, 97"> <area href="java script:ajaxLoader('', 63)" shape="rect" coords="388, 29, 490, 96"> <area href="java script:ajaxLoader('', 63)" shape="rect" coords="512, 13, 619, 102"> <area target="_blank" href="" shape="rect" coords="635, 27, 734, 89"> </map> <img src="images/home_03.jpg" usemap="#FPMap2"></div> </div> <div id="dvCDA" class="invisivel"></div> <div id="dvCliente" class="invisivel"></div> [b]<div id="dvCalendar" class="invisivel"> <div id="topCalendar"> <div id="prev"><a href="java script:void(null)" onclick="calendar.go(-1)"> <img id="img" style="margin-top:4px" src="images/trileft.gif" border="0"></a></div> <div id="mes"></div> <div id="next"><a href="java script:void(null)" onclick="calendar.go(1)"> <img id="img" style="margin-top:4px" src="images/tri.gif" border="0"></a></div> <div id="icClose"> <a href="java script:void(null)" onclick="calendar.close()"> <img style="margin-top:2px" src="images/closeLayer.gif" border="0"></a></div> </div> <div id="calendar"></div> </div>[/b] </div> </body></html>Chamada dentro de um form para o campo tipo data:
o class label formata alinhando o texto à direita numa cor e fundo de acordo com o projeto.
Note que na chamada do calendário, deve-se passar o id do campo. A chamada acontece ao clicar no campo ou num ícone que simbolize o calendário.
<tr> <td class="label">Data:</td> <td><input type="text" id="dataEmi" name="dataEmi" value="<?= $dataEmi ?>" onfocus="calendar.open('dataEmi')"> <span style="font-size:8pt; color:#c0c0c0">DD/MM/AAAAAA</small> <a href="java script:void(null)" onclick="calendar.open('dataEmi')"> <img src="images/calend.gif" align="absMiddle" border="0" alt="Abrir Calendário"></a> </td><tr>
Discussão (4)
Carregando comentários...