wish to know how to reuse JS for multiple calanders in same page

[jasonc]

I have a page that shows many calanders at present i have 10.

 

I am currently using the following method to get the data for each entry.

 

<?
for ($i = 1; $i <= 10; $i++) {
?><input name="<?=$i;?>" type="text" value="<?
											if(@mysql_result($results, $i - 1, 'dates')) {
											echo(@mysql_result($results, $i - 1, 'dates'));
											} else {
													?>yyyy-mm-dd<?
													}
										?>"><?
										if($i / 2 == (floor($i / 2))) { ?><br><? }
}
?>

 

this works if the data is entered manually but what i wish to use now is to have a clickable calander image beside each box and have this show a pop up calander to select a date.

 

the problem I am facing is how to run this javascript many times over as it would update all boxes unless I created a different JS for each box which would be a long process and long codes.

 

I have included the script I wish to use but if there is a better way to do it I am up for suggestings.

This code works if I am just having one calander, but need to find a way to either recode a bit or know how I correctly use this script to its full potential.

 

the following calander.php is what i tried to do but as you will see i am having to rename each calander variable call..

 

call2

call3

call4

call5  as so on

 

 

 

calander.php

<input type="text" name="start_date" value="<?=$posts['start_date'];?>" /><a href="javascript:cal12.popup();" style="text-decoration: none;"> <img src="tigra_calendar/img/cal.gif" width="21" height="21" border="0" align="texttop" alt="Click Here to Pick up the date" /></a>
<script language="JavaScript"><!--
					var cal12 = new calendar1(document.forms['updateevents'].elements['start_date']);
					cal12.year_scroll = true;
					cal12.time_comp = false;
					//--></script>

 

 

calander1.js

// Title: Tigra Calendar
// URL: http://www.softcomplex.com/products/tigra_calendar/
// Version: 3.4 (European date format)
// Date: 07/12/2007
// Note: Permission given to use this script in ANY kind of applications if
//    header lines are left unchanged.
// Note: Script consists of two files: calendar?.js and calendar.html

// if two digit year input dates after this year considered 20 century.
var NUM_CENTYEAR = 30;
// is time input control required by default
var BUL_TIMECOMPONENT = false;
// are year scrolling buttons required by default
var BUL_YEARSCROLL = true;

var calendars = [];
var RE_NUM = /^\-?\d+$/;

function calendar1(obj_target) {

// assigning methods
this.gen_date = cal_gen_date1;
this.gen_time = cal_gen_time1;
this.gen_tsmp = cal_gen_tsmp1;
this.prs_date = cal_prs_date1;
this.prs_time = cal_prs_time1;
this.prs_tsmp = cal_prs_tsmp1;
this.popup    = cal_popup1;

// validate input parameters
if (!obj_target)
	return cal_error("Error calling the calendar: no target control specified");
if (obj_target.value == null)
	return cal_error("Error calling the calendar: parameter specified is not valid target control");
this.target = obj_target;
this.time_comp = BUL_TIMECOMPONENT;
this.year_scroll = BUL_YEARSCROLL;

// register in global collections
this.id = calendars.length;
calendars[this.id] = this;
}

function cal_popup1 (str_datetime) {
if (str_datetime)
	this.dt_current = this.prs_tsmp(str_datetime);
else 
	this.dt_selected = this.dt_current = this.prs_tsmp(this.target.value);

if (!this.dt_current) return;

var obj_calwindow = window.open(
	'./tigra_calendar/calendar.html?id=' + this.id + '&s=' + this.dt_selected.valueOf() + '&c=' + this.dt_current.valueOf(),
	'Calendar', 'width=200,height=' + (this.time_comp ? 215 : 190) +
	',status=no,resizable=no,top=200,left=200,dependent=yes,alwaysRaised=yes'
);
obj_calwindow.opener = window;
obj_calwindow.focus();
}

// timestamp generating function
function cal_gen_tsmp1 (dt_datetime) {
return(this.gen_date(dt_datetime) + ' ' + this.gen_time(dt_datetime));
}

// date generating function
function cal_gen_date1 (dt_datetime) {
return (
	(dt_datetime.getDate() < 10 ? '0' : '') + dt_datetime.getDate() + "-"
	+ (dt_datetime.getMonth() < 9 ? '0' : '') + (dt_datetime.getMonth() + 1) + "-"
	+ dt_datetime.getFullYear()
);
}
// time generating function
function cal_gen_time1 (dt_datetime) {
return (
	(dt_datetime.getHours() < 10 ? '0' : '') + dt_datetime.getHours() + ":"
	+ (dt_datetime.getMinutes() < 10 ? '0' : '') + (dt_datetime.getMinutes()) + ":"
	+ (dt_datetime.getSeconds() < 10 ? '0' : '') + (dt_datetime.getSeconds())
);
}

// timestamp parsing function
function cal_prs_tsmp1 (str_datetime) {
// if no parameter specified return current timestamp
if (!str_datetime)
	return (new Date());

// if positive integer treat as milliseconds from epoch
if (RE_NUM.exec(str_datetime))
	return new Date(str_datetime);

// else treat as date in string format
var arr_datetime = str_datetime.split(' ');
return this.prs_time(arr_datetime[1], this.prs_date(arr_datetime[0]));
}

// date parsing function
function cal_prs_date1 (str_date) {

var arr_date = str_date.split('-');

if (arr_date.length != 3) return cal_error ("Invalid date format: '" + str_date + "'.\nFormat accepted is dd-mm-yyyy.");
if (!arr_date[0]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo day of month value can be found.");
if (!RE_NUM.exec(arr_date[0])) return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed values are unsigned integers.");
if (!arr_date[1]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo month value can be found.");
if (!RE_NUM.exec(arr_date[1])) return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed values are unsigned integers.");
if (!arr_date[2]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo year value can be found.");
if (!RE_NUM.exec(arr_date[2])) return cal_error ("Invalid year value: '" + arr_date[2] + "'.\nAllowed values are unsigned integers.");

var dt_date = new Date();
dt_date.setDate(1);

if (arr_date[1] < 1 || arr_date[1] > 12) return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed range is 01-12.");
dt_date.setMonth(arr_date[1]-1);

if (arr_date[2] < 100) arr_date[2] = Number(arr_date[2]) + (arr_date[2] < NUM_CENTYEAR ? 2000 : 1900);
dt_date.setFullYear(arr_date[2]);

var dt_numdays = new Date(arr_date[2], arr_date[1], 0);
dt_date.setDate(arr_date[0]);
if (dt_date.getMonth() != (arr_date[1]-1)) return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed range is 01-"+dt_numdays.getDate()+".");

return (dt_date)
}

// time parsing function
function cal_prs_time1 (str_time, dt_date) {

if (!dt_date) return null;
var arr_time = String(str_time ? str_time : '').split(':');

if (!arr_time[0]) dt_date.setHours(0);
else if (RE_NUM.exec(arr_time[0]))
	if (arr_time[0] < 24) dt_date.setHours(arr_time[0]);
	else return cal_error ("Invalid hours value: '" + arr_time[0] + "'.\nAllowed range is 00-23.");
else return cal_error ("Invalid hours value: '" + arr_time[0] + "'.\nAllowed values are unsigned integers.");

if (!arr_time[1]) dt_date.setMinutes(0);
else if (RE_NUM.exec(arr_time[1]))
	if (arr_time[1] < 60) dt_date.setMinutes(arr_time[1]);
	else return cal_error ("Invalid minutes value: '" + arr_time[1] + "'.\nAllowed range is 00-59.");
else return cal_error ("Invalid minutes value: '" + arr_time[1] + "'.\nAllowed values are unsigned integers.");

if (!arr_time[2]) dt_date.setSeconds(0);
else if (RE_NUM.exec(arr_time[2]))
	if (arr_time[2] < 60) dt_date.setSeconds(arr_time[2]);
	else return cal_error ("Invalid seconds value: '" + arr_time[2] + "'.\nAllowed range is 00-59.");
else return cal_error ("Invalid seconds value: '" + arr_time[2] + "'.\nAllowed values are unsigned integers.");

dt_date.setMilliseconds(0);
return dt_date;
}

function cal_error (str_message) {
alert (str_message);
return null;
}

 

and the calander pop file is...

 

<!--
Title: Tigra Calendar
URL: http://www.softcomplex.com/products/tigra_calendar/
Version: 3.4 (all formats)
Date:  01/06/2007
Note: Permission given to use this script in ANY kind of applications if
   header lines are left unchanged.
Note: Script consists of two files: calendar?.js and calendar.html
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Select Date, Please.</title>
<style>
td {font-family: Tahoma, Verdana, sans-serif; font-size: 12px;}
td a {text-decoration: none;}
</style>
<script language="JavaScript">

// months as they appear in the calendar's title
var ARR_MONTHS = ["January", "February", "March", "April", "May", "June",
	"July", "August", "September", "October", "November", "December"];
// week day titles as they appear on the calendar
var ARR_WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
// day week starts from (normally 0-Su or 1-Mo)
var NUM_WEEKSTART = 1;
// path to the directory where calendar images are stored. trailing slash req.
var STR_ICONPATH = 'img/';

var re_urlCur = new RegExp('c=(\\-?\\d+)');
var re_urlSel = new RegExp('s=(\\-?\\d+)');
var re_id = new RegExp('id=(\\d+)');

var dt_selected = (re_urlSel.exec(String(window.location))
? new Date(new Number(RegExp.$1)) : new Date());
var dt_current = (re_urlCur.exec(String(window.location))
? new Date(new Number(RegExp.$1)) : dt_selected);
var num_id = (re_id.exec(String(window.location))
? new Number(RegExp.$1) : 0);

var obj_caller = (window.opener ? window.opener.calendars[num_id] : null);

if (obj_caller && obj_caller.year_scroll) {
// get same date in the previous year
var dt_prev_year = new Date(dt_current);
dt_prev_year.setFullYear(dt_prev_year.getFullYear() - 1);
if (dt_prev_year.getDate() != dt_current.getDate())
	dt_prev_year.setDate(0);

// get same date in the next year
var dt_next_year = new Date(dt_current);
dt_next_year.setFullYear(dt_next_year.getFullYear() + 1);
if (dt_next_year.getDate() != dt_current.getDate())
	dt_next_year.setDate(0);
}

// get same date in the previous month
var dt_prev_month = new Date(dt_current);
if (dt_prev_month.getMonth()) {
dt_prev_month.setMonth(dt_prev_month.getMonth() - 1);
if (dt_prev_month.getDate() != dt_current.getDate())
	dt_prev_month.setDate(0);
}
else {
dt_prev_month.setFullYear(dt_prev_month.getFullYear() - 1);
dt_prev_month.setMonth(11);
}

// get same date in the next month
var dt_next_month = new Date(dt_current);
dt_next_month.setMonth(dt_next_month.getMonth() + 1);
if (dt_next_month.getDate() != dt_current.getDate())
dt_next_month.setDate(0);

// get first day to display in the grid for current month
var dt_firstday = new Date(dt_current);
dt_firstday.setDate(1);
dt_firstday.setDate(1 - (7 + dt_firstday.getDay() - NUM_WEEKSTART) % 7);

// function passing selected date to calling window
function set_datetime(n_datetime, b_close) {
if (!obj_caller) return;

var dt_datetime = obj_caller.prs_time(
	(document.cal ? document.cal.time.value : ''),
	new Date(n_datetime)
);

if (!dt_datetime) return;
if (b_close) {

	obj_caller.target.value = (document.cal
		? obj_caller.gen_tsmp(dt_datetime)
		: obj_caller.gen_date(dt_datetime)
	);window.close();
}
else obj_caller.popup(dt_datetime.valueOf());
}

</script>
</head>
<body bgcolor="#FFFFFF" marginheight="5" marginwidth="5" topmargin="5" leftmargin="5" rightmargin="5">
<table class="clsOTable" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#4682B4">
<table cellspacing="1" cellpadding="3" border="0" width="100%">
<tr><td colspan="7"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<script language="JavaScript">
document.write(
'<td nowrap>'+(obj_caller&&obj_caller.year_scroll?'<a href="javascript:set_datetime('+dt_prev_year.valueOf()+')"><img src="'+STR_ICONPATH+'prev_year.gif" width="16" height="16" border="0" alt="previous year"></a> ':'')+'<a href="javascript:set_datetime('+dt_prev_month.valueOf()+')"><img src="'+STR_ICONPATH+'prev.gif" width="16" height="16" border="0" alt="previous month"></a></td>'+
'<td align="center" width="100%"><font color="#ffffff">'+ARR_MONTHS[dt_current.getMonth()]+' '+dt_current.getFullYear() + '</font></td>'+
'<td nowrap><a href="javascript:set_datetime('+dt_next_month.valueOf()+')"><img src="'+STR_ICONPATH+'next.gif" width="16" height="16" border="0" alt="next month"></a>'+(obj_caller && obj_caller.year_scroll?' <a href="javascript:set_datetime('+dt_next_year.valueOf()+')"><img src="'+STR_ICONPATH+'next_year.gif" width="16" height="16" border="0" alt="next year"></a>':'')+'</td>'
);
</script>
</tr>
</table></td></tr>
<tr>
<script language="JavaScript">

// print weekdays titles
for (var n=0; n<7; n++)
document.write('<td bgcolor="#87cefa" align="center"><font color="#ffffff">'+ARR_WEEKDAYS[(NUM_WEEKSTART+n)%7]+'</font></td>');
document.write('</tr>');

// print calendar table
var dt_current_day = new Date(dt_firstday);
while (dt_current_day.getMonth() == dt_current.getMonth() ||
dt_current_day.getMonth() == dt_firstday.getMonth()) {
// print row heder
document.write('<tr>');
for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
	if (dt_current_day.getDate() == dt_selected.getDate() &&
		dt_current_day.getMonth() == dt_selected.getMonth() &&
		dt_current_day.getFullYear() == dt_selected.getFullYear())
		// print current date
		document.write('<td bgcolor="#ffb6c1" align="center" width="14%">');
	else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
		// weekend days
		document.write('<td bgcolor="#dbeaf5" align="center" width="14%">');
	else
		// print working days of current month
		document.write('<td bgcolor="#ffffff" align="center" width="14%">');

	document.write('<a href="javascript:set_datetime('+dt_current_day.valueOf() +', true);">');

	if (dt_current_day.getMonth() == this.dt_current.getMonth())
		// print days of current month
		document.write('<font color="#000000">');
	else 
		// print days of other months
		document.write('<font color="#606060">');

	document.write(dt_current_day.getDate()+'</font></a></td>');
	dt_current_day.setDate(dt_current_day.getDate()+1);
}
// print row footer
document.write('</tr>');
}
if (obj_caller && obj_caller.time_comp) {
document.write('<form onsubmit="javascript:set_datetime('+dt_current.valueOf()+', true)" name="cal"><tr><td colspan="7" bgcolor="#87CEFA"><font color="White" face="tahoma, verdana" size="2">Time: <input type="text" name="time" value="'+obj_caller.gen_time(this.dt_current)+'" size="8" maxlength="8"></font></td></tr></form>');
document.forms['cal'].elements['time'].focus();
}
</script>
</table>
</td></tr></table>
</body>
</html>

[seventheyejosh]

I hate to be that guy, but jquery ( jquery.com ) and jqueryui ( jqueryui.com ) are perfect for this.

 

It is just what the User Interface kit was made for.

 

<p>
     <input type="text" name="date_1" id="date_1" size="10">
</p>
<p>
     <input type="text" name="date_2" id="date_2" size="10">
</p>
<p>
     <input type="text" name="date_3" id="date_3" size="10">
</p>

...

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jqueryui.js"></script>

<script type="text/javascript">

$(document).ready(function(){

     $("#date_1,#date_2,#date_3").datepicker();

});

</script>

[Psycho]

I'm not going to read through all of that code above, but the solutioin is pretty simple. You just need an onclick event for each field. The event can be attached to the actual field or to a button. But, the onclick event should call the function to display the calendar AND pass the ID of the field where the data should be populated. You can then use that to populate the correct field.

 

There are many free scripts available if you do some searching that can do this for you. But, if you are interested in doing this yourself here is a very rough script to illustrate the idea to get you started.

 

<html>
<head>
<script language="JavaScript">

var fieldObj, calendarObj;

function setDate(date)
{
    fieldObj.value = date;
    calendarObj.style.display = 'none';
}

function pickDate(fieldID)
{
    fieldObj = document.getElementById(fieldID);
    calendarObj = document.getElementById('calendar');
    calendarObj.style.left = fieldObj.offsetLeft;
    calendarObj.style.top = fieldObj.offsetTop+25;
    calendarObj.style.display = '';
}

</script>
</head>
<body>

Date 1: <input type="text" name="date[]" id="date_1" onclick="pickDate(this.id)" readonly="readonly" />
Click the field to set the date<br />
Date 2: <input type="text" name="date[]" id="date_2" readonly="readonly" />
<button onclick="pickDate('date_2');">Pick a Date</button>
Click the button to set the date<br />
Date 3: <input type="text" name="date[]" id="date_3" onclick="pickDate(this.id)" readonly="readonly" />
<button onclick="pickDate('date_3');">Pick a Date</button>
Click button or field to set the date<br />

<div id="calendar" style="position:absolute;z-index:1;top:0;left:0;background-color:yellow;display:none;">
<a href="#" onclick="setDate(this.innerHTML)" >1</a>
<a href="#" onclick="setDate(this.innerHTML)" >2</a>
<a href="#" onclick="setDate(this.innerHTML)" >3</a>
<a href="#" onclick="setDate(this.innerHTML)" >4</a>
<a href="#" onclick="setDate(this.innerHTML)" >5</a>
<a href="#" onclick="setDate(this.innerHTML)" >6</a>
<a href="#" onclick="setDate(this.innerHTML)" >7</a><br />
<a href="#" onclick="setDate(this.innerHTML)" >8</a>
<a href="#" onclick="setDate(this.innerHTML)" >9</a>
<a href="#" onclick="setDate(this.innerHTML)" >10</a>
<a href="#" onclick="setDate(this.innerHTML)" >11</a>
<a href="#" onclick="setDate(this.innerHTML)" >12</a>
<a href="#" onclick="setDate(this.innerHTML)" >13</a>
<a href="#" onclick="setDate(this.innerHTML)" >14</a>
</div>

</body>
</html>