Adding a Class to a image

wispas · January 4, 2010

Hi,

I currently have a working javascript calender pop up that opens a pop up box when i click inside the text box. The class is currently on the text field. I have tried adding it to the image but that does not work.

Instead i would like to add the class to the image icon and have the calender to open up when i click on the calender icon image.

Can this be done?

--------------------------------

Here is my code:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Javascript Calendar</title>

@import url(calendar.css);

</style>

</head>

<body>

Date Select 1: <input type="text" name="date1" class="calendarSelectDate" />

<p>

<label>

</label>

</p>

</form>

</body>

</html>

Adam · January 4, 2010

Post "calendar.js" ..

wispas · January 4, 2010

var popUpCal = {

selectedMonth: new Date().getMonth(), // 0-11

selectedYear: new Date().getFullYear(), // 4-digit year

selectedDay: new Date().getDate(),

calendarId: 'calendarDiv',

inputClass: 'calendarSelectDate',

init: function () {

var x = getElementsByClass(popUpCal.inputClass, document, 'input');

var y = document.getElementById(popUpCal.calendarId);

// set the calendar position based on the input position

for (var i=0; i<x.length; i++) {

x.onfocus = function () {

popUpCal.selectedMonth = new Date().getMonth();

setPos(this, y); // setPos(targetObj,moveObj)

y.style.display = 'block';

popUpCal.drawCalendar(this);

popUpCal.setupLinks(this);

}

},

drawCalendar: function (inputObj) {

var html = '';

html = '<a id="closeCalender">Close Calendar</a>';

html += '<table cellpadding="0" cellspacing="0" id="linksTable"><tr>';

html += ' <td><a id="prevMonth"><< Prev</a></td>';

html += ' <td><a id="nextMonth">Next >></a></td>';

html += '</tr></table>';

html += '<table id="calendar" cellpadding="0" cellspacing="0"><tr>';

html += '<th colspan="7" class="calendarHeader">'+getMonthName(popUpCal.selectedMonth)+' '+popUpCal.selectedYear+'</th>';

html += '</tr><tr class="weekDaysTitleRow">';

var weekDays = new Array('S','M','T','W','T','F','S');

for (var j=0; j<weekDays.length; j++) {

html += '<td>'+weekDays[j]+'</td>';

}

var daysInMonth = getDaysInMonth(popUpCal.selectedYear, popUpCal.selectedMonth);

var startDay = getFirstDayofMonth(popUpCal.selectedYear, popUpCal.selectedMonth);

var numRows = 0;

var printDate = 1;

if (startDay != 7) {

numRows = Math.ceil(((startDay+1)+(daysInMonth))/7); // calculate the number of rows to generate

}

// calculate number of days before calendar starts

if (startDay != 7) {

var noPrintDays = startDay + 1;

} else {

var noPrintDays = 0; // if sunday print right away

}

var today = new Date().getDate();

var thisMonth = new Date().getMonth();

var thisYear = new Date().getFullYear();

// create calendar rows

for (var e=0; e<numRows; e++) {

html += '<tr class="weekDaysRow">';

// create calendar days

for (var f=0; f<7; f++) {

if ( (printDate == today)

&& (popUpCal.selectedYear == thisYear)

&& (popUpCal.selectedMonth == thisMonth)

&& (noPrintDays == 0)) {

html += '<td id="today" class="weekDaysCell">';

} else {

html += '<td class="weekDaysCell">';

}

if (noPrintDays == 0) {

if (printDate <= daysInMonth) {

html += '<a>'+printDate+'</a>';

}

printDate++;

}

html += '</td>';

if(noPrintDays > 0) noPrintDays--;

}

html += '</tr>';

}

html += '</table>';

// add calendar to element to calendar Div

var calendarDiv = document.getElementById(popUpCal.calendarId);

calendarDiv.innerHTML = html;

// close button link

document.getElementById('closeCalender').onclick = function () {

calendarDiv.style.display = 'none';

}

// setup next and previous links

document.getElementById('prevMonth').onclick = function () {

popUpCal.selectedMonth--;

if (popUpCal.selectedMonth < 0) {

popUpCal.selectedMonth = 11;

popUpCal.selectedYear--;

}

popUpCal.drawCalendar(inputObj);

popUpCal.setupLinks(inputObj);

}

document.getElementById('nextMonth').onclick = function () {

popUpCal.selectedMonth++;

if (popUpCal.selectedMonth > 11) {

popUpCal.selectedMonth = 0;

popUpCal.selectedYear++;

}

popUpCal.drawCalendar(inputObj);

popUpCal.setupLinks(inputObj);

}

}, // end drawCalendar function

setupLinks: function (inputObj) {

// set up link events on calendar table

var y = document.getElementById('calendar');

var x = y.getElementsByTagName('a');

for (var i=0; i<x.length; i++) {

x.onmouseover = function () {

this.parentNode.className = 'weekDaysCellOver';

}

x.onmouseout = function () {

this.parentNode.className = 'weekDaysCell';

}

x.onclick = function () {

document.getElementById(popUpCal.calendarId).style.display = 'none';

popUpCal.selectedDay = this.innerHTML;

inputObj.value = formatDate(popUpCal.selectedDay, popUpCal.selectedMonth, popUpCal.selectedYear);

}

// Add calendar event that has wide browser support

if ( typeof window.addEventListener != "undefined" )

window.addEventListener( "load", popUpCal.init, false );

else if ( typeof window.attachEvent != "undefined" )

window.attachEvent( "onload", popUpCal.init );

else {

if ( window.onload != null ) {

var oldOnload = window.onload;

window.onload = function ( e ) {

oldOnload( e );

popUpCal.init();

};

}

else

window.onload = popUpCal.init;

}

/* Functions Dealing with Dates */

function formatDate(Day, Month, Year) {

Month++; // adjust javascript month

if (Month <10) Month = '0'+Month; // add a zero if less than 10

if (Day < 10) Day = '0'+Day; // add a zero if less than 10

var dateString = Day+'/'+Month+'/'+Year;

return dateString;

}

function getMonthName(month) {

var monthNames = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

return monthNames[month];

}

function getDayName(day) {

var dayNames = new Array('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday')

return dayNames[day];

}

function getDaysInMonth(year, month) {

return 32 - new Date(year, month, 32).getDate();

}

function getFirstDayofMonth(year, month) {

var day;

day = new Date(year, month, 0).getDay();

return day;

}

/* Common Scripts */

function getElementsByClass(searchClass,node,tag) {

var classElements = new Array();

if ( node == null ) node = document;

if ( tag == null ) tag = '*';

var els = node.getElementsByTagName(tag);

var elsLen = els.length;

var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

for (i = 0, j = 0; i < elsLen; i++) {

if ( pattern.test(els.className) ) {

classElements[j] = els;

j++;

}

return classElements;

}

/* Position Functions */

function setPos(targetObj,moveObj) {

var coors = findPos(targetObj);

moveObj.style.position = 'absolute';

moveObj.style.top = coors[1]+20 + 'px';

moveObj.style.left = coors[0] + 'px';

}

function findPos(obj) {

var curleft = curtop = 0;

if (obj.offsetParent) {

curleft = obj.offsetLeft

curtop = obj.offsetTop

while (obj = obj.offsetParent) {

curleft += obj.offsetLeft

curtop += obj.offsetTop

}

return [curleft,curtop];

}

Adam · January 4, 2010

Replace:

var x = getElementsByClass(popUpCal.inputClass, document, 'input');

With:

var x = getElementsByClass(popUpCal.inputClass, document);

...And it should work. The third parameter there is restricting the calendar to inputs only.

wispas · January 4, 2010

thanks... this now works. but when i select a date it does not insert it into the text field.

any idea?

Adam · January 4, 2010

Ah of course. Well this script wasn't really written to be added to an image, however you could modify it a bit to suit your needs. The first idea that comes to mind, and this is pretty hacky, would be to use the 'rel' attribute to target the input on none-input elements. This line:

inputObj.value = formatDate(popUpCal.selectedDay, popUpCal.selectedMonth, popUpCal.selectedYear);

Is what assigns the value to the input, you could add in a conditional to validate that it's an input, else check if there's 'rel' attribute set, and if so try to use that.

Give this a try (I can't say for sure it will work):

var dateVal = formatDate(popUpCal.selectedDay, popUpCal.selectedMonth, popUpCal.selectedYear);

if (inputObj.tagName != 'input') {
    if (inputObj.getAttribute('rel') != 'undefined') {
        document.getElementById(inputObj.getAttribute('rel')).value = dateVal;
    }
} else {
    inputObj.value = dateVal;
}

Remember you'll need to add the id of the input to the rel attribute of the image.

If that all made sense?

wispas · January 4, 2010

Remember you'll need to add the id of the input to the rel attribute of the image.

Can you explain this part to me as im a little confused.

Adam · January 5, 2010

Basically we're trying to use the rel attribute to reference the ID of an input we're going to write the value to:

Date Select 1: <input type="text" name="date1" id="input_id" />
<img src="images/Calendar-icon.png" alt="" width="16" height="16" border="0" class="calendarSelectDate" rel="input_id" />

It's a bit messy but I can't see any reason why it wouldn't work.

Sign In

Adding a Class to a image

Recommended Posts

wispas

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

wispas

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

wispas

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

wispas

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information