Page 1 of 1

Popup, select a date, calendar in javascript in PHP page

Posted: Tue May 23, 2006 7:13 pm
by penpaper
A free javascript pop up calendar script. Similar to those used by the airlines, etc. works fine when the following code is on an .html page but won't work at all when I put it in a .php page

Code: Select all

<form name="foo">
      <input type="text" name="bar" />
           <a href="#" onclick="return getCalendar(document.foo.bar);">
                <img src="calendar.png" border="0" />
           </a> 
   </form>
I don't know what to do but include the files that relate to the above code. I know it's a lot of code to go thru and I greatly appreciate any help you can offer.

The script that has the getCalendar() function is as follows:

Code: Select all

<script language="javascript">
var calendarWindow = null;
var calendarColors = new Array();
calendarColors['bgColor'] = '#BDC5D0';
calendarColors['borderColor'] = '#333366';
calendarColors['headerBgColor'] = '#143464';
calendarColors['headerColor'] = '#FFFFFF';
calendarColors['dateBgColor'] = '#8493A8';
calendarColors['dateColor'] = '#004080';
calendarColors['dateHoverBgColor'] = '#FFFFFF';
calendarColors['dateHoverColor'] = '#8493A8';
var calendarMonths = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
var calendarWeekdays = new Array('S', 'M', 'T', 'W', 'T', 'F', 'S', 'S');
var calendarUseToday = true;
var calendarFormat = 'm/d/y';
var calendarStartMonday = false;
var calendarScreenX = 100; // either 'auto' or numeric
var calendarScreenY = 100; // either 'auto' or numeric

// }}}
// {{{ getCalendar()

[b] function getCalendar(in_dateField) [/b]
{
    if (calendarWindow && !calendarWindow.closed) {
        alert('Calendar window already open.  Attempting focus...');
        try {
            calendarWindow.focus();
        }
        catch(e) {}
        
        return false;
    }

    var cal_width = 415;
    var cal_height = 310;

    // IE needs less space to make this thing
    if ((document.all) && (navigator.userAgent.indexOf("Konqueror") == -1)) {
        cal_width = 410;
    }

    calendarTarget = in_dateField;
 [b]   calendarWindow = window.open('calendar.html', [/b] 'dateSelectorPopup','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=0,dependent=no,width='+cal_width+',height='+cal_height + (calendarScreenX != 'auto' ? ',screenX=' + calendarScreenX : '') + (calendarScreenY != 'auto' ? ',screenY=' + calendarScreenY : ''));

    return false;
}

// }}}
// {{{ killCalendar()

function killCalendar() 
{
    if (calendarWindow && !calendarWindow.closed) {
        calendarWindow.close();
    }
}

// }}}

</script>
The file calendar.html that is called above -

Code: Select all

html>
  <head>
    <title>Date Selector</title>
    <script language="JavaScript">
// {{{ y2k()

function y2k(number)
{
    return (number < 1000) ? number + 1900 : number; 
}

// }}}
// {{{ _rgb2hex()

function _rgb2hex(red,green,blue) 
{
    var html_red = red.toString(16).toUpperCase();
    var html_green = green.toString(16).toUpperCase();
    var html_blue = blue.toString(16).toUpperCase();
    if (html_red.length == 1) {
        html_red = "0" + html_red
    }

    if (html_green.length == 1) {
        html_green = "0" + html_green
    }

    if (html_blue.length == 1) {
        html_blue = "0" + html_blue
    }

    return '#' + html_red + html_green + html_blue;
}
 
// }}}
// {{{ _hex2rgb()

function _hex2rgb(htmlcode) 
{
    var htmlcode = htmlcode.replace(/#/,'');
    var rgb = new Array();
    rgb["red"] = parseInt(htmlcode.substr(0,2),16);
    rgb["green"] = parseInt(htmlcode.substr(2,2),16);
    rgb["blue"] = parseInt(htmlcode.substr(4,2),16);
    return rgb;
}
 
// }}}
// {{{ getDarkColor()

function getDarkColor(htmlcode) 
{
    var decimalcolor = _hex2rgb(htmlcode);
    decimalcolor["red"] = Math.max(0,decimalcolor["red"]-40);
    decimalcolor["green"] = Math.max(0,decimalcolor["green"]-40);
    decimalcolor["blue"] = Math.max(0,decimalcolor["blue"]-40);
    return _rgb2hex(decimalcolor["red"],decimalcolor["green"],decimalcolor["blue"]);
}

// }}}

if (typeof(window.opener.calendarStartMonday) == 'undefined') {
    var calendarStartMonday = false;
}
else {
    var calendarStartMonday = window.opener.calendarStartMonday ? true : false;
}

// get the date format
if (typeof(window.opener.calendarFormat) == 'undefined') {
    var calendarFormat = 'y/m/d';
}
// we are doing on a leap of faith here that the user has 'm','d' and 'y' only in the format
else {
    var calendarFormat = window.opener.calendarFormat;
}

// get the calendarColors variable and setup the colors
if (typeof(window.opener.calendarColors) == 'undefined') {
    alert('Please configure the colors by setting the calendarColors array!');
    window.close();
}

// grab the color settings
var calendarColors = window.opener.calendarColors;
// set defaults for the selected date to be a darker color
if (typeof(calendarColors['dateSelectedBgColor']) == 'undefined') {
    calendarColors['dateSelectedBgColor'] = getDarkColor(calendarColors['dateBgColor']);
}

if (typeof(calendarColors['dateSelectedColor']) == 'undefined') {
    calendarColors['dateSelectedColor'] = calendarColors['dateColor'];
}

if (typeof(window.opener.calendarMonths) == 'undefined' || window.opener.calendarMonths.length != 12) {
    var calendarMonths = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
}
else {
    var calendarMonths = window.opener.calendarMonths;
}

if (typeof(window.opener.calendarWeekdays) == 'undefined' || window.opener.calendarWeekdays.length != 8) {
    // we have two sundays to accomodate for calendars starting on monday
    var calendarWeekdays = new Array('S', 'M', 'T', 'W', 'T', 'F', 'S', 'S');
}
else {
    var calendarWeekdays = window.opener.calendarWeekdays;
}

var calendarDays  = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

//images
var right_still = "images/arrows_r_still.gif"
var right_anim = "images/arrows_r_anim.gif"
var left_still = "images/arrows_l_still.gif"
var left_anim = "images/arrows_l_anim.gif"

// get the reference to the target element and setup the date
var targetDateField = window.opener.calendarTarget;
var dateString = targetDateField.value;

if (dateString != '' && 
   (typeof(window.opener.calendarUseToday) == 'undefined' || !window.opener.calendarUseToday)) {
    // convert the user format of the date into something we use to make a javascript Date object
    // we need to pad with placeholders to get the rigth offset
    tmp_format = calendarFormat.replace(/m/i, 'mm').replace(/d/i, 'dd').replace(/y/i, 'yyyy');
    tmp_yOffset = tmp_format.indexOf('y');
    tmp_mOffset = tmp_format.indexOf('m');
    tmp_dOffset = tmp_format.indexOf('d');
    var today = new Date(dateString.substring(tmp_yOffset, tmp_yOffset + 4), dateString.substring(tmp_mOffset, tmp_mOffset +
 2) - 1, dateString.substring(tmp_dOffset, tmp_dOffset + 2));

    if ((today == "Invalid Date") || (isNaN(today))) {
        var today = new Date();
    }
}
// use today's date
else {
    var today = new Date();
}

var day = today.getDate();
var year  = y2k(today.getYear());
var month = today.getMonth();

var currentDay = day;
var currentYear = year;
var currentMonth = month;
    </script>
  </head>
  <frameset frameborder="0" framespacing="0" ROWS="100%,*">
    <frame scrolling="no" frameborder="0" marginheight="0" marginwidth="0" name="cal" noresize src="calendar_body.html">
  </frameset>
</html>
The other file that is used is called calendar_body.html and follows -

Code: Select all

<html>
  <head>
    <title>Calendar</title>
    <style>
body { 
  background-color: #FFFFFF;
}
.calendar {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 400px;
}
.dayofweek { 
  font-size: 13px;
} 
.month { 
  font-size: 13px;
}
.date { 
  width: 10%;
  height: 40px;
  padding-right: 3px;
  text-align: right;
  vertical-align: bottom;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  cursor: hand;
}
.selected { 
  width: 10%;
  height: 40px;
  padding-right: 3px;
  text-align: right;
  vertical-align: bottom;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  cursor: hand;
} 
.empty { 
  width: 10%;
  height: 40px;
} 
a {
  font-weight: bold;
}
form {
  padding: 0px;
  margin: 0px;
}
    </style>
    <script type="text/javascript" language="JavaScript"><!--
// {{{ calendar()

function calendar(month, year) 
{
    var realMonth = parseInt(month) + 1;
    // we need to put in the zero placeholders
    if (realMonth < 10) {
        realMonth = '0' + realMonth;
    }

    var realDate = '';
    var output = '';
       
    firstDay = new Date(year, month, 1);
    startDay = firstDay.getDay();
    weekdayOffset = 0;
    if (parent.calendarStartMonday) {
        if (startDay) {
            startDay--;
        }
        else {
            startDay = 6;
        }

        weekdayOffset++;
    }


    // Determined whether this is a leap year or not
    if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) {
        parent.calendarDays[1] = 29; 
    }
    else {
        parent.calendarDays[1] = 28;
    }

    // we break up the output so it flushes the buffer frequently
    output += '<form><table border="0" cellspacing="0" cellpadding="3" width="100%"><tr><td align="left"><img src="limage/arrows_l_still.gif" id="arrow_left_id" border="0" usemap="#arrow_left_map"></td><td align="center">';
    output += '<select onchange="parent.month=this.options[this.selectedIndex].value; window.location='+"'calendar_body.html'"+';" title="Month Jump">';
    for (month_cnt = 0; month_cnt < 12; month_cnt++) {
        output += '<option value='+month_cnt;
        if (month_cnt == thisMonth) {
            output += ' selected';
        }

        output += '>' + parent.calendarMonths[month_cnt] + '</option>';
    }

    output += '</select> <select onchange="parent.year=this.options[this.selectedIndex].value; window.location='+"'calendar_body.html'"+';" title="Year Jump">';
    for (year_cnt = 1; year_cnt <= 21; year_cnt++) {
        output += '<option value="'+yeararray[year_cnt]+'"';
        if (yeararray[year_cnt] == thisYear) {
            output += ' selected';
        }
        output += '>'+yeararray[year_cnt]+'</option>';
    }

    output += '</select></td>';
    output += '<td align="right"><img src="images/arrows_r_still.gif" name="arrow_right_id" id="arrow_right_id" border="0" usemap="#arrow_right_map"></td></tr>\n';
    output += '<tr><td colspan="3" valign="top"><table border="0" cellspacing="1" cellpadding="0" width="100%">';
    output += '<tr class="dayofweek" style="background-color: '+calendarColors['headerBgColor']+';">';
    // print out the days of the week
    for (i = weekdayOffset; i < 7 + weekdayOffset; i++) {
        output += '<th style="color: '+calendarColors['headerColor']+';">' + parent.calendarWeekdays[i] + '</th>';
    }

    output += '\n<tr>';

    var column = 0;
    for (i = 0; i < startDay; i++) {
        output += '<td class="empty" style="background-color: '+calendarColors['bgColor']+';">&nbsp</td>';
        column++;
    }

    for (i = 1; i <= parent.calendarDays[month]; i++) {
        realDate = i;
        // add the zero place holder
        if (realDate < 10) {
            realDate = '0' + realDate
        }
	 
        if ((i == parent.currentDay)  && (month == parent.currentMonth) && (year == parent.currentYear)) {
            output += '<td class="selected" style="background-color: '+calendarColors['dateSelectedBgColor']+'; color: '+calendarColors['dateSelectedColor']+';" height="40" onmouseover="colorize(this,1,\'dateSelected\');" onmouseout="colorize(this,0,\'dateSelected\');" onclick="sendDate('+realMonth+', '+realDate+', '+year+');">';
            if(document.layers) {
         output += '<a href="javascript: void(0);" onclick="sendDate('+realMonth+', '+realDate+', '+year+');">'+i+'</a>&nbsp;&nbsp;';
            }
            else {
	        output += '<br />' + i;
            }
	    output += '</td>';
        }
        else {
            output += '<td class="date" style="background-color: '+calendarColors['dateBgColor']+'; color: '+calendarColors['dateColor']+';" height="40" onmouseover="colorize(this,1,\'date\');" onmouseout="colorize(this,0,\'date\');" onclick="sendDate('+realMonth+', '+realDate+', '+year+');">';
            if(document.layers) {
	        output += '<a href="javascript: void(0);" onclick="sendDate('+realMonth+', '+realDate+', '+year+');">'+i+'</a>&nbsp;&nbsp;';
            }
            //put in some line breaks to fill up the cell
	    else {
	        output += '<br />'+i
	    }
            output += '</td>';
        }

        column++;
        // end the week
        if (column == 7) {
            output += '</tr>\n<tr>';
            column = 0;
        }
    }

    for(j = parent.calendarDays[month]; j < 42-startDay; j++) {
        output += '<td class="empty" style="background-color: '+calendarColors['bgColor']+';" height="40">&nbsp</td>';
        column++;
        // end the week
        if (column == 7) {
            output += '</tr>\n<tr>';
            column = 0;
        }
    }
     
    output += '</tr></table></td></tr></table></form>';
     
    return output;
}

// }}}
// {{{ printCalendar()

function printCalendar(whichMonth)
{
    var output = '';

    if (document.layers) {
        var output = '<body link="' + calendarColors['dateColor'] + '" alink="' + calendarColors['dateSelectedColor']+ '"><layer bgcolor="'+calendarColors['bgColor']+'">';
    }
    else {
        var output = '<body><style>select { font-weight: bold; font-size: 12px; }</style><div class="calendar" style="border: 2px solid ' + calendarColors['borderColor'] + '; background-color: '+calendarColors['bgColor']+';">';
    }

    output += calendar(whichMonth,thisYear);
    if (!document.layers) {
        output += '</div>';
    }
    else {
        output += '</layer>';
    }

    output += '<map name="arrow_right_map"><area shape="RECT" coords="1,1,13,17" onmouseover="animate_right(\'arrow_right_id\',1)" onmouseout="animate_right(\'arrow_right_id\',0)" onclick="nextmonth();" href="calendar_body.html" title="Next Month" alt="Next Month"><area shape="RECT" coords="22,1,44,17" onmouseover="animate_right(\'arrow_right_id\',1)" onmouseout="animate_right(\'arrow_right_id\',0)" onclick="yearforward();" href="calendar_body.html" title="Next Year" alt="Next Year"></map><map name="arrow_left_map"><area shape="RECT" coords="1,1,23,17" onmouseover="animate_left(\'arrow_left_id\',1)" onmouseout="animate_left(\'arrow_left_id\',0)" onclick="yearback();" href="calendar_body.html" title="Previous Year" alt="Previous Year"><area shape="RECT" coords="32,1,45,17" onmouseover="animate_left(\'arrow_left_id\',1)" onmouseout="animate_left(\'arrow_left_id\',0)" onclick="previousmonth();" href="calendar_body.html" title="Previous Month" alt="Previous Month"></map>';
    output += '</body>';

    document.open();
    document.write(output);
    document.write();
}

// }}}
// {{{ animate_right() 

function animate_right(imagename,imageswitch) 
{
    if(document.all) {
        imagename = eval("document.all." + imagename)
    }
    else if(document.getElementById) {
        imagename = document.getElementById(imagename)
    }

    if (!document.layers) {
        if (imageswitch == 1) {
            imagename.src = parent.right_anim;
        }
        else {
            imagename.src = parent.right_still;
        }
    }
}

// }}}
// {{{ animate_left()

function animate_left(imagename,imageswitch) 
{
    if (document.all) {
        imagename = eval("document.all." + imagename)
    }
    else if (document.getElementById) {
        imagename = document.getElementById(imagename)
    }
    if (!document.layers) {  
        if (imageswitch == 1) {
          imagename.src = parent.left_anim;
        }
        else {
          imagename.src = parent.left_still;
        }
    }
}

// }}}
// {{{ colorize()

function colorize (which, toggle, type) 
{
    if ((document.all) || (document.getElementById)) {
        if (toggle == 1) { 
            which.style.color = calendarColors['dateHoverColor'];
            which.style.backgroundColor = calendarColors['dateHoverBgColor'];
        }
        else {
            which.style.color = calendarColors[type + 'Color'];
            which.style.backgroundColor = calendarColors[type + 'BgColor'];
        }
    }
}

// }}}
// {{{ yearback()

function yearback() 
{
   parent.year--;
}

// }}}
// {{{ yearforward()

function yearforward() 
{
   parent.year++;
}

// }}}
// {{{ previousmonth()

function previousmonth() 
{
    if (parent.month > 0) {
        parent.month--;
    }
    else {
        parent.month = 11;
        parent.year--;
    }  
}

// }}}
// {{{ nextmonth()

function nextmonth() 
{
    if (parent.month < 11) {
        parent.month++;
    }
    else {
        parent.month = 0;
        parent.year++;
    }
}

// }}}
// {{{ sendDate()

function sendDate(month, day, year) 
{
    // pad with blank zeros numbers under 10
    month = month < 10 ? '0' + month : month;
    day   = day   < 10 ? '0' + day   : day;
    selectedDate = parent.calendarFormat;
    selectedDate = selectedDate.replace(/m/, month);
    selectedDate = selectedDate.replace(/d/, day);
    selectedDate = selectedDate.replace(/y/, year);
    targetDateField.value = selectedDate;
    parent.window.close();
}

// }}}

// grab the color settings from the parent, who has done validition on the variable
var calendarColors = parent.calendarColors;

// get the reference to the target element from the parent, who has done validation on variable
var targetDateField = parent.targetDateField;

var thisDay   = parent.day;
var thisMonth = parent.month;
var thisYear  = parent.year;

var yeararray = new Array();
for (year_cnt = 1; year_cnt <= 21; year_cnt++) {
    yeararray[year_cnt] = thisYear - 11 + year_cnt;
}

printCalendar(thisMonth); 

//--></script>
  </head>
  <body alink="#000000">
  </body>
</html>
:arrow:

Posted: Tue May 23, 2006 8:49 pm
by GeXus
Take your working .html page and rename it to .php, then push it to your web server... you're saying that does not work?

Changed file names

Posted: Wed May 24, 2006 7:19 am
by penpaper
I changed calendar.js to calendar_js.php and added calendar_js.php to my includes in the file that has the Form Tag in it

I changed calendar_body.html to calendar_body.php
I changed calendar.html to calendar.php

I used Extended Replace to change references within the files to the new file names.

I uploaded all 4 files and I still get no popup calendar.

Oh! I did try just changing the .html files to .php files and leave the .js alone - that didn't work either.

Any other suggestions will be gratefully received.

Posted: Wed May 24, 2006 9:18 am
by GeXus
Do not rename your .js files, they should all remain the same. The only file that should be renamed to .php extension.... should be the html pages.

Form within a form work around

Posted: Wed May 24, 2006 1:15 pm
by KimberCat
What we are trying to have is a php page that contains a form requesting info from the user. One of the input boxes is for a date. Our boss wants the user to be able to click on a calendar icon and select the date from the popup calendar. The date is then loaded in the input box. (All done via Javascript) The problem is that this popup calendar function uses a form of it's own and I know that you can't nest forms. For example...

<form>


<div class="mediumtext1"> <strong>Event Date</strong></div>

<div class="note">Please specify the day that the school will be closed/delayed or the day of the event<br>that is being postponed or cancelled.</div>
<br>
<label for="date"> Date &nbsp;<span class="sm">mm/dd/yy</span> </label>

<form name="foo">
<input type="text" name="bar" /><a href="#" onclick="return getCalendar(document.foo.bar);"><img src="calendar.png" border="0" /></a>
</form>
<br>


</form>

This is just the section for the date. I have quite a bit more of input required from the user both before this section and after. The javascript puts the selected date in the input box.
See https://www.zito9.com/test_public/calendar/index.html I need to put this into a php page that has a form already.

See https://www.zito9.com/test_public/close_info.php for the page that we want modify to have this feature.

Our boss has required the popup calendar for the date selection. Is there a workaround for this?

Thanks, Kimber

Posted: Thu May 25, 2006 12:11 pm
by penpaper
Thanks all for the assist. Kimber found another popup that doesn't use the FORM tag and it works just great.