Jump to content

Calendário - Ajuda


RstyleZ
 Share

Recommended Posts

Eu encontrei o seguinte calendário:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Tigra Calendar Sample #2 - Multiple Calendars</title>

<!-- link calendar files  -->
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">

</head>
<body>

<form name="testform">

<!-- calendar attaches to existing form element -->
<input type="text" name="testinput" />
<script language="JavaScript">
var o_cal = new tcal ({
	// form name
	'formname': 'testform',
	// input name
	'controlname': 'testinput'
});

// individual template parameters can be modified via the calendar variable
o_cal.a_tpl.yearscroll = false;
o_cal.a_tpl.weekstart = 1;

</script>

<br />

<input type="text" name="testinput2" id="myOtherInput" />
<script language="JavaScript">

// whole calendar template can be redefined per individual calendar
var A_CALTPL = {
	'months' : ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
	'weekdays' : ['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sa'],
	'yearscroll': true,
	'weekstart': 0,
	'centyear'  : 70,
	'imgpath' : 'img/'
}

new tcal ({
	// if referenced by ID then form name is not required
	'controlname': 'myOtherInput'
}, A_CALTPL);
</script>

</form>

</body>
</html>

E depois de mete-lo a funcionar surgiu um problema. Na base de dados o formato está "yyyy-mm-dd hh:mm:ss" e o calendário que inseri só usa o formado "dd-mm-yy".

Eu sei que tem haver com o ficheiro .js mas gostava de saber onde posso alterar.

Se for preciso meto o código do .js.

Cumprimentos

Renato Resende

Link to comment
Share on other sites

Este é o código do ficheiro .js

// Tigra Calendar v4.0.2 (12-01-2009) European (dd-mm-yyyy)
// http://www.softcomplex.com/products/tigra_calendar/
// Public Domain Software... You're welcome.

// default settins
var A_TCALDEF = {
'months' : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
'weekdays' : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
'yearscroll': true, // show year scroller
'weekstart': 1, // first day of week: 0-Su or 1-Mo
'centyear'  : 70, // 2 digit years less than 'centyear' are in 20xx, othewise in 19xx.
'imgpath' : 'img/' // directory with calendar images
}
// date parsing function
function f_tcalParseDate (s_date) {

var re_date = /^\s*(\d{1,2})\-(\d{1,2})\-(\d{2,4})\s*$/;
if (!re_date.exec(s_date))
	return alert ("Invalid date: '" + s_date + "'.\nAccepted format is dd-mm-yyyy.")
var n_day = Number(RegExp.$1),
	n_month = Number(RegExp.$2),
	n_year = Number(RegExp.$3);

if (n_year < 100)
	n_year += (n_year < this.a_tpl.centyear ? 2000 : 1900);
if (n_month < 1 || n_month > 12)
	return alert ("Invalid month value: '" + n_month + "'.\nAllowed range is 01-12.");
var d_numdays = new Date(n_year, n_month, 0);
if (n_day > d_numdays.getDate())
	return alert("Invalid day of month value: '" + n_day + "'.\nAllowed range for selected month is 01 - " + d_numdays.getDate() + ".");

return new Date (n_year, n_month - 1, n_day);
}
// date generating function
function f_tcalGenerDate (d_date) {
return (
	(d_date.getDate() < 10 ? '0' : '') + d_date.getDate() + "-"
	+ (d_date.getMonth() < 9 ? '0' : '') + (d_date.getMonth() + 1) + "-"
	+ d_date.getFullYear()
);
}

// implementation
function tcal (a_cfg, a_tpl) {

// apply default template if not specified
if (!a_tpl)
	a_tpl = A_TCALDEF;

// register in global collections
if (!window.A_TCALS)
	window.A_TCALS = [];
if (!window.A_TCALSIDX)
	window.A_TCALSIDX = [];

this.s_id = a_cfg.id ? a_cfg.id : A_TCALS.length;
window.A_TCALS[this.s_id] = this;
window.A_TCALSIDX[window.A_TCALSIDX.length] = this;

// assign methods
this.f_show = f_tcalShow;
this.f_hide = f_tcalHide;
this.f_toggle = f_tcalToggle;
this.f_update = f_tcalUpdate;
this.f_relDate = f_tcalRelDate;
this.f_parseDate = f_tcalParseDate;
this.f_generDate = f_tcalGenerDate;

// create calendar icon
this.s_iconId = 'tcalico_' + this.s_id;
this.e_icon = f_getElement(this.s_iconId);
if (!this.e_icon) {
	document.write('<img src="' + a_tpl.imgpath + 'cal.gif" id="' + this.s_iconId + '" onclick="A_TCALS[\'' + this.s_id + '\'].f_toggle()" class="tcalIcon" alt="Open Calendar" />');
	this.e_icon = f_getElement(this.s_iconId);
}
// save received parameters
this.a_cfg = a_cfg;
this.a_tpl = a_tpl;
}

function f_tcalShow (d_date) {

// find input field
if (!this.a_cfg.controlname)
	throw("TC: control name is not specified");
if (this.a_cfg.formname) {
	var e_form = document.forms[this.a_cfg.formname];
	if (!e_form)
		throw("TC: form '" + this.a_cfg.formname + "' can not be found");
	this.e_input = e_form.elements[this.a_cfg.controlname];
}
else
	this.e_input = f_getElement(this.a_cfg.controlname);

if (!this.e_input || !this.e_input.tagName || this.e_input.tagName != 'INPUT')
	throw("TC: element '" + this.a_cfg.controlname + "' does not exist in "
		+ (this.a_cfg.formname ? "form '" + this.a_cfg.controlname + "'" : 'this document'));

// dynamically create HTML elements if needed
this.e_div = f_getElement('tcal');
if (!this.e_div) {
	this.e_div = document.createElement("DIV");
	this.e_div.id = 'tcal';
	document.body.appendChild(this.e_div);
}
this.e_shade = f_getElement('tcalShade');
if (!this.e_shade) {
	this.e_shade = document.createElement("DIV");
	this.e_shade.id = 'tcalShade';
	document.body.appendChild(this.e_shade);
}
this.e_iframe =  f_getElement('tcalIF')
if (b_ieFix && !this.e_iframe) {
	this.e_iframe = document.createElement("IFRAME");
	this.e_iframe.style.filter = 'alpha(opacity=0)';
	this.e_iframe.id = 'tcalIF';
	this.e_iframe.src = this.a_tpl.imgpath + 'pixel.gif';
	document.body.appendChild(this.e_iframe);
}

// hide all calendars
f_tcalHideAll();

// generate HTML and show calendar
this.e_icon = f_getElement(this.s_iconId);
if (!this.f_update())
	return;

this.e_div.style.visibility = 'visible';
this.e_shade.style.visibility = 'visible';
if (this.e_iframe)
	this.e_iframe.style.visibility = 'visible';

// change icon and status
this.e_icon.src = this.a_tpl.imgpath + 'no_cal.gif';
this.e_icon.title = 'Close Calendar';
this.b_visible = true;
}

function f_tcalHide (n_date) {
if (n_date)
	this.e_input.value = this.f_generDate(new Date(n_date));

// no action if not visible
if (!this.b_visible)
	return;

// hide elements
if (this.e_iframe)
	this.e_iframe.style.visibility = 'hidden';
if (this.e_shade)
	this.e_shade.style.visibility = 'hidden';
this.e_div.style.visibility = 'hidden';

// change icon and status
this.e_icon = f_getElement(this.s_iconId);
this.e_icon.src = this.a_tpl.imgpath + 'cal.gif';
this.e_icon.title = 'Open Calendar';
this.b_visible = false;
}

function f_tcalToggle () {
return this.b_visible ? this.f_hide() : this.f_show();
}

function f_tcalUpdate (d_date) {

var d_today = this.a_cfg.today ? this.f_parseDate(this.a_cfg.today) : f_tcalResetTime(new Date());
var d_selected = this.e_input.value == ''
	? (this.a_cfg.selected ? this.f_parseDate(this.a_cfg.selected) : d_today)
	: this.f_parseDate(this.e_input.value);

// figure out date to display
if (!d_date)
	// selected by default
	d_date = d_selected;
else if (typeof(d_date) == 'number')
	// get from number
	d_date = f_tcalResetTime(new Date(d_date));
else if (typeof(d_date) == 'string')
	// parse from string
	this.f_parseDate(d_date);

if (!d_date) return false;

// first date to display
var d_firstday = new Date(d_date);
d_firstday.setDate(1);
d_firstday.setDate(1 - (7 + d_firstday.getDay() - this.a_tpl.weekstart) % 7);

var a_class, s_html = '<table class="ctrl"><tbody><tr>'
	+ (this.a_tpl.yearscroll ? '<td' + this.f_relDate(d_date, -1, 'y') + ' title="Previous Year"><img src="' + this.a_tpl.imgpath + 'prev_year.gif" /></td>' : '')
	+ '<td' + this.f_relDate(d_date, -1) + ' title="Previous Month"><img src="' + this.a_tpl.imgpath + 'prev_mon.gif" /></td><th>'
	+ this.a_tpl.months[d_date.getMonth()] + ' ' + d_date.getFullYear()
		+ '</th><td' + this.f_relDate(d_date, 1) + ' title="Next Month"><img src="' + this.a_tpl.imgpath + 'next_mon.gif" /></td>'
	+ (this.a_tpl.yearscroll ? '<td' + this.f_relDate(d_date, 1, 'y') + ' title="Next Year"><img src="' + this.a_tpl.imgpath + 'next_year.gif" /></td></td>' : '')
	+ '</tr></tbody></table><table><tbody><tr class="wd">';

// print weekdays titles
for (var i = 0; i < 7; i++)
	s_html += '<th>' + this.a_tpl.weekdays[(this.a_tpl.weekstart + i) % 7] + '</th>';
s_html += '</tr>' ;

// print calendar table
var n_date, n_month, d_current = new Date(d_firstday);
while (d_current.getMonth() == d_date.getMonth() ||
	d_current.getMonth() == d_firstday.getMonth()) {

	// print row heder
	s_html +='<tr>';
	for (var n_wday = 0; n_wday < 7; n_wday++) {

		a_class = [];
		n_date = d_current.getDate();
		n_month = d_current.getMonth();

		// other month
		if (d_current.getMonth() != d_date.getMonth())
			a_class[a_class.length] = 'othermonth';
		// weekend
		if (d_current.getDay() == 0 || d_current.getDay() == 6)
			a_class[a_class.length] = 'weekend';
		// today
		if (d_current.valueOf() == d_today.valueOf())
			a_class[a_class.length] = 'today';
		// selected
		if (d_current.valueOf() == d_selected.valueOf())
			a_class[a_class.length] = 'selected';

		s_html += '<td onclick="A_TCALS[\'' + this.s_id + '\'].f_hide(' + d_current.valueOf() + ')"' + (a_class.length ? ' class="' + a_class.join(' ') + '">' : '>') + n_date + '</td>'

		d_current.setDate(++n_date);
		while (d_current.getDate() != n_date && d_current.getMonth() == n_month) {
			d_current.setHours(d_current.getHours + 1);
			d_current = f_tcalResetTime(d_current);
		}
	}
	// print row footer
	s_html +='</tr>';
}
s_html +='</tbody></table>';

// update HTML, positions and sizes
this.e_div.innerHTML = s_html;

var n_width  = this.e_div.offsetWidth;
var n_height = this.e_div.offsetHeight;
var n_top  = f_getPosition (this.e_icon, 'Top') + this.e_icon.offsetHeight;
var n_left = f_getPosition (this.e_icon, 'Left') - n_width + this.e_icon.offsetWidth;
if (n_left < 0) n_left = 0;

this.e_div.style.left = n_left + 'px';
this.e_div.style.top  = n_top + 'px';

this.e_shade.style.width = (n_width + 8) + 'px';
this.e_shade.style.left = (n_left - 1) + 'px';
this.e_shade.style.top = (n_top - 1) + 'px';
this.e_shade.innerHTML = b_ieFix
	? '<table><tbody><tr><td rowspan="2" colspan="2" width="6"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td width="7" height="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_tr.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tr><td height="' + (n_height - 7) + '" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_mr.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_bl.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_br.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tbody></table>'
	: '<table><tbody><tr><td rowspan="2" width="6"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td rowspan="2"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td width="7" height="7"><img src="' + this.a_tpl.imgpath + 'shade_tr.png"></td></tr><tr><td background="' + this.a_tpl.imgpath + 'shade_mr.png" height="' + (n_height - 7) + '"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tr><td><img src="' + this.a_tpl.imgpath + 'shade_bl.png"></td><td background="' + this.a_tpl.imgpath + 'shade_bm.png" height="7" align="left"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td><img src="' + this.a_tpl.imgpath + 'shade_br.png"></td></tr><tbody></table>';

if (this.e_iframe) {
	this.e_iframe.style.left = n_left + 'px';
	this.e_iframe.style.top  = n_top + 'px';
	this.e_iframe.style.width = (n_width + 6) + 'px';
	this.e_iframe.style.height = (n_height + 6) +'px';
}
return true;
}

function f_getPosition (e_elemRef, s_coord) {
var n_pos = 0, n_offset,
	e_elem = e_elemRef;

while (e_elem) {
	n_offset = e_elem["offset" + s_coord];
	n_pos += n_offset;
	e_elem = e_elem.offsetParent;
}
// margin correction in some browsers
if (b_ieMac)
	n_pos += parseInt(document.body[s_coord.toLowerCase() + 'Margin']);
else if (b_safari)
	n_pos -= n_offset;

e_elem = e_elemRef;
while (e_elem != document.body) {
	n_offset = e_elem["scroll" + s_coord];
	if (n_offset && e_elem.style.overflow == 'scroll')
		n_pos -= n_offset;
	e_elem = e_elem.parentNode;
}
return n_pos;
}

function f_tcalRelDate (d_date, d_diff, s_units) {
var s_units = (s_units == 'y' ? 'FullYear' : 'Month');
var d_result = new Date(d_date);
d_result['set' + s_units](d_date['get' + s_units]() + d_diff);
if (d_result.getDate() != d_date.getDate())
	d_result.setDate(0);
return ' onclick="A_TCALS[\'' + this.s_id + '\'].f_update(' + d_result.valueOf() + ')"';
}

function f_tcalHideAll () {
for (var i = 0; i < window.A_TCALSIDX.length; i++)
	window.A_TCALSIDX[i].f_hide();
}	

function f_tcalResetTime (d_date) {
d_date.setHours(0);
d_date.setMinutes(0);
d_date.setSeconds(0);
d_date.setMilliseconds(0);
return d_date;
}

f_getElement = document.all ?
function (s_id) { return document.all[s_id] } :
function (s_id) { return document.getElementById(s_id) };

if (document.addEventListener)
window.addEventListener('scroll', f_tcalHideAll, false);
if (window.attachEvent)
window.attachEvent('onscroll', f_tcalHideAll);

// global variables
var s_userAgent = navigator.userAgent.toLowerCase(),
re_webkit = /WebKit\/(\d+)/i;
var b_mac = s_userAgent.indexOf('mac') != -1,
b_ie5 = s_userAgent.indexOf('msie 5') != -1,
b_ie6 = s_userAgent.indexOf('msie 6') != -1 && s_userAgent.indexOf('opera') == -1;
var b_ieFix = b_ie5 || b_ie6,
b_ieMac  = b_mac && b_ie5,
b_safari = b_mac && re_webkit.exec(s_userAgent) && Number(RegExp.$1) < 500;

Já agora, penso que criei o tópico no sitio errado, se poderem meter no sitio certo agradecia.

Link to comment
Share on other sites

O problema pode-se resolver com JS ou na linguagem no servidor. A solução PHP:

Antes de salvares na base de dados podes manipular a data na linguagem no lado do servidor.

Segue um exemplo possivel (os nomes das variaveis podem ser diferentes das tuas):

$minha_data = explode('-', $_POST('testeinput2'));
$minha_data[2] = (int) $minha_data[2];

if ($minha_data[2] < 100) $minha_data[2] += ($minha_data[2] < $y = date('y', time())  ? 2000 : 1900);

$minha_hora = '00:00:00';
$minha_data = $minha_data[2] . '-' . $minha_data[1] . '-' . $minha_data[0] . ' ' . $minha_hora;

Depois de leres da BD e colocar no atributo value do elemento testeInput2:

$tempo = explode(' ',$result['data']);
$minha_data = explode('-', trim($tempo[0]));

$minha_data = $minha_data[0] . '-' . $minha_data[1] . '-' . $minha_data[2];

No HTML:

<input type="text" name="testinput2" id="myOtherInput" value="<?=$minha_data?>" />

Talvez não fosse preciso mover o tópico  ?

Link to comment
Share on other sites

Penso que ajuda (ainda estou a tentar perceber 🙂 ). Mas esqueci-me de referir.

Tenho um calendário que vai servir para criar uma data de validade no seguinte formato 2010-05-07 23:59:59 mas o calendário só insere dd-mm-yy. Eu queria que ele passa-se a criar no formato pretendido.

E quando quero editar essa data de validade. Aparece já na textbox a data no formato 2010-05-07 23:59:59 (que vai buscar na base de dados) e quando tento editar aparece uma mensagem a dizer que só aceita o formato dd-mm-yy.

Eu vou ser sincero, não percebo grande coisa de php (para não dizer que não percebo nada 😛 )

Link to comment
Share on other sites

Tenho um calendário que vai servir para criar uma data de validade no seguinte formato 2010-05-07 23:59:59 mas o calendário só insere dd-mm-yy. Eu queria que ele passa-se a criar no formato pretendido.

Esse calendário só trabalha com dias, meses e anos... o melhor seria criares outro INPUT no formulário para permitires que o utilizador introduza a hora. Penso que é a solução mais facil. Se quiseres que seja o calendário a introduzir esse valor terias que re-escrever o calendário JS quase por completo.

E quando quero editar essa data de validade. Aparece já na textbox a data no formato 2010-05-07 23:59:59 (que vai buscar na base de dados) e quando tento editar aparece uma mensagem a dizer que só aceita o formato dd-mm-yy.

Pois aqui é uma questão de manipulares a data que vêm da base de dados. No exemplo acima podes ver como fazer isso com PHP.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.