Resolvendo problemas de datas através de calendario dinamico

[Lab Design 0]

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:	[url=http://www.javascriptkit.com/]http://www.javascriptkit.com/[/url]		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.

alguns parametros que iniciam com "_" (underline) é devido às diferenças do IE e FF para width, height e position. Para quem ainda não sabe, o FF não reconhece o _width ou _top, etc... mas o IE assume, portanto ao encontrar widht:154px e _width:156px, quer dizer que para o FF vale o width:154 enquanto que para o IE vai assumir o segundo _widht:156. Esse método é muito utilizado e pode ser usado em todas as situações necessárias. A dvCalendar deve estar subordinada a uma div principal.

.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>

[Tiago Cardoso 1]

Parabéns cara, ainda não testei, ms muita gente precisa e vai precisar de seu calendário, obrigado!

[Lab Design 0]

Obrigado PKTIAGO

 

 

Corrigindo alguns bugs do Calendario:

Bem se algum tentou rodar o calendário e teve problemas na mudança de meses, aqui vai a versão corrigida. É que montei inicialmente o sistema pra um cliente que deveria funcionar somente dentro de um range.

Retirei as limitações e agora a mudança de meses tanto pra frente quanto pra traz vai sem problemas.

 

/*

3-month calendar script- Ada Shimar (adashimar@chalktv.com)

script featured on and available at:

http://www.javascriptkit.com/

Adaptado por Lauro A L Brito

*/

 

// toda a formatacao da tabela virá do arquivo style.css

// função que gera o calendario

var LastMonth=0;

var LastYear=0;

var dateRangeIn;

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 atual

hoje = new Date();

mesAtual = hoje.getMonth();

anoAtual = hoje.getYear();

minimo = mesAtual;

maximo = mesAtual-1;

 

/*

*********************************************************************

limpa o mês anterior na tabela de ocupação porque na passagem do mês,

o sistema vai considerar o mês anterior como sendo do próximo ano

*********************************************************************

*/

mesAnterior = mesAtual - 1;

if (mesAnterior < 0)

mesAnterior=11;

 

if (anoAtual < 2000) // Y2K Fix, Isaac Powell

anoAtual = anoAtual + 1900;

var yr = yr1 = anoAtual; // last month´s year

var mo = mesAtual

 

var dataInicial, dataFinal;

 

var calendar= {

 

setRange: function (dateIn, dateOut) {

dateRangeIn = dateIn;

dateRangeOut = dateOut;

},

 

go: function(offSet) {

 

// voltar

if (offSet == -1) {

if (mo > 0) mo--;

else {

mo = 11; // seta dezembro

yr = yr1 = yr-1; // passa para o ano corrente

} // if (yr==anoAtual)

 

} // if (offSet == 1)

 

// avançar

if (offSet == 1) {

if (mo < 11) mo++;

else {

yr = yr1 = yr+1; // passa para o ano seguinte

mo = 0; // seta janeiro

} // if (yr==anoAtual)

 

} // 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;

 

// 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";

}

}

[alanrg.83 0]

Estou usando este calendário da seguinte maneira:

<table width="75%" border="0">  <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></table>

Mas quando clico em "abrir calendário" isto é que acontece "/java%20script:void(null)" ele me direciona para esta pagina! Pelo que estou vendo ele esta achando que é uma pagina nao uma função.

[Tiago Cardoso 1]

É pode que javascript está escrito separado, por razões de segurança um mecanismo separe ele, então junte:

 

javascript: void(null)