473,320 Members | 2,177 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

JavaScript to Enter Date & Null

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.
Apr 17 '07 #1
3 4467
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.javascript.

--
Ra*********@gmail.com

"Wikipedia on vähän niinq internetin raamattu, kukaan ei pohjimmiltaan
usko siihen ja kukaan ei tiedä mikä pitää paikkansa." -- z00ze
Apr 17 '07 #2
Rami Elomaa <ra*********@gmail.comwrote in
news:f0**********@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.javascript.
Sorry, thanks.
Apr 17 '07 #3
"Bob Sanderson" <sa*****@LUVSPAMsandmansoftware.comwrote in message
news:Xn**********************************@69.28.18 6.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
Apr 17 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Trvl Orm | last post by:
I am working with 2 frames, Left and Right and the main code is in the left frame, which has been attached. Can someone please help me with this code. I am new to JavaScript and can't figure it...
0
by: Michelle Keys | last post by:
I am trying to call a print function to print a string from a database using javascript. Which is RC_DATA of Varchar2(2500). This is a javascript is not being used. I have a thing that needs to...
4
by: John Boy | last post by:
Hi, Can anyone help. This is really doing my nut in. 3 years ASP exp. and now doing .DOT which is a step in the wrong direction. Basically I am left with the code of a guy who has left. When I...
1
by: CR1 | last post by:
I found a great cookie script below, but don't know how to make it also pass the values sent to the cookie, to a querystring as well for tracking purposes. Can anyone help? If there was a way to...
8
by: rischfre | last post by:
Hi In order to build a weather prediction page, I was thinking to write down a Javascript (on the client). This javascript should contact a server (www.live.com) in ordert to extract the weather...
7
by: julian.tklim | last post by:
Hi, I need to build an editable Datagrid with add & delete buttons on each row using javascript. DataGrid need not be pre-populated with values. To make the thing complicated, one of the...
5
by: settyv | last post by:
Hi, Below is the Javascript function that am trying to call from asp:Button control. <script language="javascript"> function ValidateDate(fromDate,toDate) { var fromDate=new Date();
1
by: KRISHNA PRAVI | last post by:
the error is "runtime error object expected" here is the code....................................................................................... <script language="javascript"...
2
by: joelkeepup | last post by:
Hi, I made a change this morning and now im getting an error that says either "a is undefined or null" or "e is undefined or null" the microsoft ajax line is below, I have no idea how to...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.