JavaScript to Enter Date & Null

[Bob Sanderson]

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.

[Rami Elomaa]

Re: JavaScript to Enter Date & Null

Bob Sanderson kirjoitti:

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.

This is an html/javascript type question, nothing to do with php. Please
ask this in comp.lang.javas cript.

--
Rami.Elomaa@gma il.com

"Wikipedia on vähän niinq internetin raamattu, kukaan ei pohjimmiltaan
usko siihen ja kukaan ei tiedä mikä pitää paikkansa." -- z00ze

[Bob Sanderson]

Re: JavaScript to Enter Date & Null

Rami Elomaa <rami.elomaa@gm ail.comwrote in
news:f0336r$4fd $1@nyytiset.pp. htv.fi:

Bob Sanderson kirjoitti:

>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.

>
This is an html/javascript type question, nothing to do with php.
Please ask this in comp.lang.javas cript.

Sorry, thanks.

[Steve]

Re: JavaScript to Enter Date &amp; Null

"Bob Sanderson" <sandman@LUVSPA Msandmansoftwar e.comwrote in message
news:Xns9915909 081746centroidi ncearthlink@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...he re'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(sh owIn, returnTo, year, month, day)
{
showIn = document.getEle mentById(showIn );
returnTo = document.getEle mentById(return To);
if (!showIn){ return false; }
if (!returnTo){ return false; }
showIn.style.po sition = 'absolute';
showIn.style.di splay = '';
if (day)
{
returnTo.value = (month + 1) + '/' + day + '/' + year;
showIn.style.di splay = '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.setYea r(year);
thisDate.setMon th(month);
thisDate.setDat e(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.setDat e(1);
var today = new Date();
var todayDay = today.getDate() ;
var todayMonth = today.getMonth( );
var todayYear = today.getFullYe ar();
var html = '';
html += '<table style="border:1 px solid steelblue; margin:2px;
padding:2px; width:225px;">\ n';
html += ' <tr>\n';
html += ' <td style="backgrou nd-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="showCa lendar(\'' + showIn.id + '\', \'' +
returnTo.name + '\', ' + lastDate.getFul lYear() + ', ' + lastDate.getMon th()
+ ')"\n';
html += ' title="Previous Month"\n';
html += ' ><img src="/images/arrow.left.gif"
style="border:n one;"></a>\n';
html += ' </td>\n';
html += ' <td colspan="5" style="backgrou nd-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="showC alendar(\'' + showIn.id + '\', \'' +
returnTo.name + '\', ' + thisDate.getFul lYear() + ', this.value)"\n' ;
html += ' >\n';
for (month in months)
{
var selected = month == thisDate.getMon th() ? '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="showC alendar(\'' + showIn.id + '\', \'' +
returnTo.name + '\', this.value, ' + thisDate.getMon th() + ')"\n';
html += ' >\n';
for (year = 2000; year < 2038; year++)
{
var selected = year == thisDate.getFul lYear() ? 'selected' : '\n';
html += ' <option value="' + year + '" ' + selected + '>' + year +
'</option>\n';
}
html += ' </select>\n';
html += ' </td>\n';
html += ' <td style="backgrou nd-color:#FF9900; font-size:7.25pt;
padding-left:5px; padding-top:2px; text-align:left;">\n ';
html += ' <a\n';
html += ' href=""\n';
html += ' onclick="showCa lendar(\'' + showIn.id + '\', \'' +
returnTo.name + '\', ' + nextDate.getFul lYear() + ', ' + nextDate.getMon th()
+ ')"\n';
html += ' title="Next Month"\n';
html += ' ><img src="/images/arrow.right.gif "
style="border:n one;"></a>\n';
html += ' </td>\n';
html += ' <tr><td colspan="7" style="backgrou nd-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;">Su n</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Mo n</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Tu e</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">We d</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Th u</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Fr i</td>\n';
html += ' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Sa t</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.getMon th();
year = thisDate.getFul lYear();
var daysLeft = 0;
var weekDay = thisDate.getDay ();
if (weekDay 0)
{
html += ' <td colspan="' + weekDay + '"
style="backgrou nd-color:lavender; font-size:7.25pt;
width:25px;">&n bsp;</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="backgrou nd-color:lavender; width:25px;">&n bsp;</td>\n';
}
html += ' </tr>\n';
html += '</table>\n';
showIn.innerHTM L = html;
return false;
}

i usually wrap that function with this:

function getDate(parent, target)
{
target = document.getEle mentById(target );
if (!target){ return false; }
var currentDate = isDate(target.v alue) ? new Date(target.val ue) : new
Date();
target.value = isDate(target.v alue) ? target.value : '';
showCalendar(pa rent, target.name, currentDate.get FullYear(),
currentDate.get Month());
formatDate(targ et);
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.getEle mentById(target );
var alternateCalend ar = target == reportSelectByD ay.fromDate ?
document.getEle mentById('toCal endar') :
document.getEle mentById('fromC alendar');
var currentCalendar = target == reportSelectByD ay.fromDate ?
document.getEle mentById('fromC alendar') :
document.getEle mentById('toCal endar');
alternateCalend ar.style.displa y = 'none';
if (currentCalenda r.style.display == 'none')
{
getDate(current Calendar.id, target.name);
} else {
currentCalendar .style.display = 'none';
}
}

i've got a form called reportSelectByD ay. 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