Posted by Steve on 04/17/07 19:38

"Bob Sanderson" <sandman@LUVSPAMsandmansoftware.com> wrote in message
news:Xns9915909081746centroidincearthlink@69.28.186.158...
|I have a PHP web page which uses a HTML form. I would like to enter dates
| into the date fields using a JavaScript calendar, similar to the way
| phpMyAdmin does. Can anyone recommend a JavaScript that will do this?
|
| Also, how can I add a button to a form to enter a NULL.
|
| Thanks in advance.

while i must agree that this is nothing to do with javascript...here's the
world's least code intensive js calendar. :)

showIn is the div/span/element in which you want the calendar rendered.
returnTo is the input whose value will be set upon a date click.
year, month, date are all defaults for the initial date...else, today.

(you of course, must fix the text-wrapping yourself)


function showCalendar(showIn, returnTo, year, month, day)
{
showIn = document.getElementById(showIn);
returnTo = document.getElementById(returnTo);
if (!showIn){ return false; }
if (!returnTo){ return false; }
showIn.style.position = 'absolute';
showIn.style.display = '';
if (day)
{
returnTo.value = (month + 1) + '/' + day + '/' + year;
showIn.style.display = 'none';
return false;
}
var link = null;
var months = new Array(
'January' ,
'February' ,
'March' ,
'April' ,
'May' ,
'June' ,
'July' ,
'August' ,
'September' ,
'October' ,
'November' ,
'December'
);
var thisDate = new Date();
year = year < 2000 ? 2000 : year;
year = year > 2037 ? 2037 : year;
thisDate.setYear(year);
thisDate.setMonth(month);
thisDate.setDate(1);
var days = 32 - new Date(year, month, 32).getDate();
var nextDate = new Date(year, month, days + 1);
var lastDate = new Date(year, month, 0);
lastDate.setDate(1);
var today = new Date();
var todayDay = today.getDate();
var todayMonth = today.getMonth();
var todayYear = today.getFullYear();
var html = '';
html += '<table style="border:1px solid steelblue; margin:2px;
padding:2px; width:225px;">\n';
html += ' <tr>\n';
html += ' <td style="background-color:#FF9900; font-family:arial;
font-size:7.25pt; padding-right:5px; padding-top:2px;
text-align:right;">\n';
html += ' <a\n';
html += ' href=""\n';
html += ' onclick="showCalendar(\'' + showIn.id + '\', \'' +
returnTo.name + '\', ' + lastDate.getFullYear() + ', ' + lastDate.getMonth()
+ ')"\n';
html += ' title="Previous Month"\n';
html += ' ><img src="/images/arrow.left.gif"
style="border:none;"></a>\n';
html += ' </td>\n';
html += ' <td colspan="5" style="background-color:#FF9900;
padding-top:2px; text-align:center;">\n';
html += ' <select\n';
html += ' style="font-family:arial; font-size:7.25pt;
text-align:center; width:85px;"\n';
html += ' onchange="showCalendar(\'' + showIn.id + '\', \'' +
returnTo.name + '\', ' + thisDate.getFullYear() + ', this.value)"\n';
html += ' >\n';
for (month in months)
{
var selected = month == thisDate.getMonth() ? 'selected' : '\n';
html += ' <option value="' + month + '" ' + selected + '>' +
months[month] + '</option>\n';
}
html += ' </select>\n';
html += ' <select\n';
html += ' style="font-family:arial; font-size:7.25pt;
text-align:center; width:50px;"\n';
html += ' onchange="showCalendar(\'' + showIn.id + '\', \'' +
returnTo.name + '\', this.value, ' + thisDate.getMonth() + ')"\n';
html += ' >\n';
for (year = 2000; year < 2038; year++)
{
var selected = year == thisDate.getFullYear() ? 'selected' : '\n';
html += ' <option value="' + year + '" ' + selected + '>' + year +
'</option>\n';
}
html += ' </select>\n';
html += ' </td>\n';
html += ' <td style="background-color:#FF9900; font-size:7.25pt;
padding-left:5px; padding-top:2px; text-align:left;">\n';
html += ' <a\n';
html += ' href=""\n';
html += ' onclick="showCalendar(\'' + showIn.id + '\', \'' +
returnTo.name + '\', ' + nextDate.getFullYear() + ', ' + nextDate.getMonth()
+ ')"\n';
html += ' title="Next Month"\n';
html += ' ><img src="/images/arrow.right.gif"
style="border:none;"></a>\n';
html += ' </td>\n';
html += ' <tr><td colspan="7" style="background-color:#FF9900;
border-bottom:1px solid lavendar; height:2px;"></td></tr>\n';
html += ' <tr>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Sun</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Mon</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Tue</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Wed</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Thu</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Fri</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Sat</td>\n';
html += ' </tr>\n';
html += ' <tr><td colspan="7" style="border-bottom:1px solid lavendar;
height:2px;"></td></tr>\n';
html += ' <tr>\n';
month = thisDate.getMonth();
year = thisDate.getFullYear();
var daysLeft = 0;
var weekDay = thisDate.getDay();
if (weekDay > 0)
{
html += ' <td colspan="' + weekDay + '"
style="background-color:lavender; font-size:7.25pt;
width:25px;">&nbsp;</td>\n';
}
for (var day = 1; day <= days; day++)
{
for (; weekDay < 7; weekDay++)
{
if (day > days)
{
daysLeft++;
continue;
}
if (!weekDay)
{
html += ' </tr>\n';
html += ' <tr>\n';
}
var border = 'none';
var fontWeight = '100';
if (day == todayDay && month == todayMonth && year == todayYear)
{
border = '1px solid #990000';
fontWeight = '600';
}
html += '<td style="border:' + border + 'font-size:7.25pt;
width:20px;">\n';
html += ' <a\n';
html += ' href="' + day + '"\n';
html += ' style="font-weight:' + fontWeight + ';
text-decoration:none;"\n';
html += ' onclick="return showCalendar(\'' + showIn.id + '\',
\'' + returnTo.name + '\', ' + year + ', ' + month + ', ' + day + ')"\n';
html += ' >' + day + '</a>\n';
html += '</td>\n';
day++
}
day--;
weekDay = 0;
}
if (daysLeft > 0)
{
html += ' <td colspan="' + daysLeft + '"
style="background-color:lavender; width:25px;">&nbsp;</td>\n';
}
html += ' </tr>\n';
html += '</table>\n';
showIn.innerHTML = html;
return false;
}

i usually wrap that function with this:

function getDate(parent, target)
{
target = document.getElementById(target);
if (!target){ return false; }
var currentDate = isDate(target.value) ? new Date(target.value) : new
Date();
target.value = isDate(target.value) ? target.value : '';
showCalendar(parent, target.name, currentDate.getFullYear(),
currentDate.getMonth());
formatDate(target);
return false;
}

that uses the input's current value to set the default calendar date when
displayed. or, this is even more simple...

function pickDate(target)
{
target = document.getElementById(target);
var alternateCalendar = target == reportSelectByDay.fromDate ?
document.getElementById('toCalendar') :
document.getElementById('fromCalendar');
var currentCalendar = target == reportSelectByDay.fromDate ?
document.getElementById('fromCalendar') :
document.getElementById('toCalendar');
alternateCalendar.style.display = 'none';
if (currentCalendar.style.display == 'none')
{
getDate(currentCalendar.id, target.name);
} else {
currentCalendar.style.display = 'none';
}
}

i've got a form called reportSelectByDay. it has two calendars, one for the
starting date and one for ending date. this function toggles them on/off
when needed, uses getDate to default the calendar's initial view.

hth,

me

• Next in forum: Re: Printing Avery Labels from a web site
• Prev in forum: Re: Encrypt/decrypt automatically with PHP PDF document via Client CA
• Thread view: Re: JavaScript to Enter Date & Null

[Reply to this message]