/    Sign up×
Community /Pin to ProfileBookmark

Javascript global variable!

Hello,
I have a calendar javascript file who is used to fill a date field, in a form.
After this the value of this date field it’s copied to another second date field
with diferent format.
The calendar javascript file is called in a onFocus event. After chose the date
the field is filled and a function called CopyIt() copy the date value changed
to the second date field.
The problem that I need to specify the id of the date fields to be used in CopyIt()
funtion, in calendar javascript file, but I don’t want.
If I need to use this calendar javascript file in another form in the same page
I need to duplicate the javascript file with other id date fields in CopyIt().
What I want that to use only one calendar javascript file to more date fields
only pass throuth the onFocus event the id of the date field respective.
But I don’t know how to create a “global” variable in javascript file with the
id of the date field to be used in CopyIt() function.

Any help????

This the input form fields:

<input name=”fdata” size=”12″ maxlength=”10″ style=”border:1px solid #003399; font-family: Verdana; font-size: 10px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px color:#999999px” onfocus=”showCalendarControl(fdata);” value=”” id=”fdata” readonly>
<input name=”fdata2″ size=”15″ value=”” id=”fdata2″>

This is the calendar javascript file:

function formataData(num) {
var dataS = new String(num);
var dataPartes = dataS.split(“-“);

var sDia = parseInt(dataPartes[0],10);
if (sDia < 10){ sDia = “0” + sDia }
var sMes = parseInt(dataPartes[1],10);
if (sMes < 10){ sMes = “0” + sMes }
var sAno = parseInt(dataPartes[2],10);
var Data = sMes + “-” + sDia + “-” + sAno;
return Data;

}

function copyIt() {
cp = “fdata”;
var x = document.getElementById(cp).value;
document.getElementById(cp + “2”).value = formataData(x);
}

function CalendarControl() {

var calendarId = ‘CalendarControl’;
var currentYear = 0;
var currentMonth = 0;
var currentDay = 0;

var selectedYear = 0;
var selectedMonth = 0;
var selectedDay = 0;

var months = [‘Janeiro’,’Fevereiro’,’Março’,’Abril’,’Maio’,’Junho’,’Julho’,’Agosto’,’Setembro’,’Outubro’,’Novembro’,’Dezembro’];
var dateField = null;


function getDaysInMonth(year, month) {
return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
}

function getDayOfWeek(year, month, day) {
var date = new Date(year,month-1,day)
return date.getDay();
}

this.clearDate = clearDate;
function clearDate() {
dateField.value = ”;
hide();
}

this.setDate = setDate;
function setDate(year, month, day) {
if (dateField) {
if (month < 10) {month = “0” + month;}
if (day < 10) {day = “0” + day;}

var dateString = day+”-“+month+”-“+year;
dateField.value = dateString;
hide();
}
return;

}

this.changeMonth = changeMonth;
function changeMonth(change) {
currentMonth += change;
currentDay = 0;
if(currentMonth > 12) {
currentMonth = 1;
currentYear++;
} else if(currentMonth < 1) {
currentMonth = 12;
currentYear–;
}

calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();

}

this.changeYear = changeYear;
function changeYear(change) {
currentYear += change;
currentDay = 0;
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
}

function getCurrentYear() {
var year = new Date().getYear();
if(year < 1900) year += 1900;
return year;
}

function getCurrentMonth() {
return new Date().getMonth() + 1;
}

function getCurrentDay() {
return new Date().getDate();
}

function calendarDrawTable() {

var dayOfMonth = 1;
var validDay = 0;
var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
var daysInMonth = getDaysInMonth(currentYear, currentMonth);
var css_class = null; //CSS class for each day

var table = “<table cellspacing=’0′ cellpadding=’0′ border=’0′>”;
table = table + “<tr class=’header’>”;
table = table + ” <td class=’previous’><a href=’javascript:changeCalendarControlMonth(-1);’>&lt;</a></td>”;
table = table + ” <td colspan=’5′ class=’title’>” + months[currentMonth-1] + ” ” + currentYear + “</td>”;
table = table + ” <td class=’next’><a href=’javascript:changeCalendarControlMonth(1);’>&gt;</a></td>”;
table = table + “</tr>”;
table = table + “<tr><th>D</th><th>S</th><th>T</th><th>Q</th><th>Q</th><th>S</th><th>S</th></tr>”;

for(var week=0; week < 6; week++) {
table = table + “<tr>”;
for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
if(week == 0 && startDayOfWeek == dayOfWeek) {
validDay = 1;
} else if (validDay == 1 && dayOfMonth > daysInMonth) {
validDay = 0;
}

if(validDay) {
if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
css_class = ‘current’;
} else if (dayOfWeek == 0 || dayOfWeek == 6) {
css_class = ‘weekend’;
} else {
css_class = ‘weekday’;
}

table = table + “<td><a class='”+css_class+”‘ href=”javascript:setCalendarControlDate(“+currentYear+”,”+currentMonth+”,”+dayOfMonth+”);copyIt()”>”+dayOfMonth+”</a></td>”;
dayOfMonth++;
} else {
table = table + “<td class=’empty’>&nbsp;</td>”;
}
}
table = table + “</tr>”;
}
return table;

}

this.show = show;
function show(field) {
can_hide = 0;

if (dateField == field) {
return;
} else {
dateField = field;
}

if(dateField) {
try {
var dateString = new String(dateField.value);
var dateParts = dateString.split(“-“);

selectedMonth = parseInt(dateParts[1],10);
selectedDay = parseInt(dateParts[0],10);
selectedYear = parseInt(dateParts[2],10);
} catch(e) {}
}

if (!(selectedYear && selectedMonth && selectedDay)) {
selectedMonth = getCurrentMonth();
selectedDay = getCurrentDay();
selectedYear = getCurrentYear();
}

currentMonth = selectedMonth;
currentDay = selectedDay;
currentYear = selectedYear;

if(document.getElementById){

calendar = document.getElementById(calendarId);

calendar.innerHTML = calendarDrawTable();

setProperty(‘display’, ‘block’);

var fieldPos = new positionInfo(dateField);
var calendarPos = new positionInfo(calendarId);

var x = fieldPos.getElementLeft();
var y = fieldPos.getElementBottom();

setProperty(‘left’, x + “px”);
setProperty(‘top’, y + “px”);

if (document.all) {
setElementProperty(‘display’, ‘block’, ‘CalendarControlIFrame’);
setElementProperty(‘left’, x + “px”, ‘CalendarControlIFrame’);
setElementProperty(‘top’, y + “px”, ‘CalendarControlIFrame’);
setElementProperty(‘width’, calendarPos.getElementWidth() + “px”, ‘CalendarControlIFrame’);
setElementProperty(‘height’, calendarPos.getElementHeight() + “px”, ‘CalendarControlIFrame’);
}
}

}

this.hide = hide;
function hide() {
if(dateField) {
setProperty(‘display’, ‘none’);
setElementProperty(‘display’, ‘none’, ‘CalendarControlIFrame’);
dateField = null;
}
}

this.visible = visible;
function visible() {
return dateField
}

this.can_hide = can_hide;
var can_hide = 0;
}

var calendarControl = new CalendarControl();
//—————————————————————
function showCalendarControl(textField) {
// textField.onblur = hideCalendarControl;
calendarControl.show(textField);
}
//—————————————————————
function clearCalendarControl() {
calendarControl.clearDate();
}
//—————————————————————
function hideCalendarControl() {
if (calendarControl.visible()) {
calendarControl.hide();
}
}
//—————————————————————
function setCalendarControlDate(year, month, day) {
calendarControl.setDate(year, month, day);
}
//—————————————————————
function changeCalendarControlYear(change) {
calendarControl.changeYear(change);
}
//—————————————————————
function changeCalendarControlMonth(change) {
calendarControl.changeMonth(change);
}

document.write(“<iframe id=’CalendarControlIFrame’ src=’javascript:false;’ frameBorder=’0′ scrolling=’no’></iframe>”);
document.write(“<div id=’CalendarControl’></div>”);

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@haggy__Oct 03.2013 — Instead of passing the id of the element to the showCalendarControl function, pass "this". That way every time showCalendarControl is called it will have the instance of whatever input element was focused.

Change:
[code=html]<input name="fdata" size="12" maxlength="10" style="border:1px solid #003399; font-family: Verdana; font-size: 10px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px color:#999999px" onfocus="showCalendarControl(fdata);" value="" id="fdata" readonly>
<input name="fdata2" size="15" value="" id="fdata2">[/code]


To:
[code=html]<input name="fdata" size="12" maxlength="10" style="border:1px solid #003399; font-family: Verdana; font-size: 10px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px color:#999999px" onfocus="showCalendarControl(this);" value="" id="fdata" readonly>
<input name="fdata2" size="15" value="" id="fdata2">[/code]


Then in your showCalendarControl function you can manipulate the input however you need to. This will also remove the need of any hard coded ID's in your javascript files.
×

Success!

Help @ganhaoh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...