AJAX

Javascript - Print Date in different color

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2004

Posts: 440

Reputation: Sulley's Boo will become famous soon enough

Solved Threads: 10

Sulley's Boo Sulley's Boo is offline

Offline

Posting Pro in Training

Javascript - Print Date in different color

May 26th, 2006

How can i display the dates that i have in my table in a different color if they were less than today's date?

Last edited by tgreer; May 26th, 2006 at 5:26 pm.

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Javascript - Print Date in different color

May 26th, 2006

Since this is a JavaScript question, I assume you want this done completely client-side? We'll be happy to help, but first a couple of observations:

1) This might be easier server-side. How are you generating your pages?

2) The approach will depend on your page structure and doctype. Can you give us a skeleton sample of your HTML?

•

Join Date: Aug 2005

Posts: 5,264

Reputation: iamthwee is a splendid one to behold

Solved Threads: 377

iamthwee

Offline

Posting Expert

Re: Javascript - Print Date in different color

May 26th, 2006

Perhaps this

*Voted best profile in the world*

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Javascript - Print Date in different color

May 26th, 2006

The Date Object would indeed come into play, but the bigger question is how he'll access the "dates" that are in his table. There needs to be a corresponding Date Object for those, or a method to access those via the DOM and move them into a Date Object, before any comparsion could be done.

That's why I pointed toward the server-side solution. My guess is that this is a dynamic, program-generated page, and as such, rather than load the page with JavaScript Date Objects to do client-side, after-the-fact date recognition, he should simply do it server-side while building the page.

•

Join Date: Dec 2004

Posts: 440

Reputation: Sulley's Boo will become famous soon enough

Solved Threads: 10

Sulley's Boo Sulley's Boo is offline

Offline

Posting Pro in Training

awww .. thanks ..

May 27th, 2006

omg O_o hard Qs ..

How am i generating the data? ..

Its all dummy data that i typed directly in the table .. but later on IT ppl will load data to it i dont know how .. :o

and I am working on my own machine no client no server no nothing ..

ahh ..

but anyway can you give me the server side one? I think they want that one ..

and yea you asked for the html skeleton ..

here you go .. this needs to be changed its not the final thing ..

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Flight Information System</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style></head>

<body>
<table width="491" border="0" align="center">
<tr>
<td><img src="bright_banner.jpg" width="725" height="85"/></td>
</tr>
</table>
<table width="728" border="0" align="center">
<tr class="titles">
<td width="191" height="30"><table width="191" border="0">
<tr>
<td width="185"><div align="left"><span class="titles"><strong>Exp. Period</strong>: 25.04.00 - 25.04.08</span></div></td>
</tr>
</table></td>
<td><div align="center" class="style7"></div>
<table width="502" border="0" align="center">
<tr>
<td width="496"><div align="center"><strong>Flight Information System / </strong><strong>Record of Airline Aircraft Report</strong></div> </td>
</tr>
</table> </td>
</tr>
</table>
<table width="723" border="0" align="center" cellspacing="1">
<thead>
<tr class="head1">

<th colspan="4">Airline - Aircraft</th>
<th colspan="3">Certificate Validity</th>
<th colspan="4">Insurance Validity</th>
<th colspan="4">Add Title</th>
</tr>

<tr class="header">
<td width="26">Code</td>
<td width="114">Name</th>
<td width="28">Air</td>
<td width="34">Reg. No</td>
<td width="48">A.O.C</td>
<td width="48">C.O.F.R</td>
<td width="48">C.O.F.A</td>
<td width="48">HULL</td>
<td width="48">Third Party</td>
<td width="48">PAX</td>
<td width="48">CGO</td>
<td width="31">LOAD</td>
<td width="31">ACAS</td>
<td width="33">TCAS (V7)</td>
<td width="44">Total Aircrafts</td>
</tr>
</thead>

<tbody>
<tr>
<td>00</td>
<td>TAV Aviation Joint Stock</td>
<td>HS125</td>
<td>TCTAV</td>
<td> </td>
<td>05/01/2007</td>
<td> </td>
<td>31/10/2006</td>
<td>31/10/2006</td>
<td>31/10/2006</td>
<td>31/10/2006</td>
<td>PAX</td>
<td>YES</td>
<td>NO</td>
<td>1</td>
</tr>
<tr>
<td>000</td>
<td>Salem Aviation Jeddah</td>
<td>AN12</td>
<td>11036</td>
<td>01/06/2006</td>
<td>01/07/2006</td>
<td>01/08/2006</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>PAX</td>
<td>NO</td>
<td>YES</td>
<td>1</td>
</tr>
<tr>
<td>AAP</td>
<td>Aerovista Airlines</td>
<td>AN24</td>
<td>EX004</td>
<td>15/08/2006</td>
<td>18/12/2006</td>
<td> </td>
<td>30/04/2006</td>
<td> </td>
<td> </td>
<td> </td>
<td>PAX</td>
<td>YES</td>
<td>NO</td>
<td>1</td>
</tr>
<tr>
<td>AIN</td>
<td>African International Airways</td>
<td>DC8</td>
<td>ZSOSI</td>
<td>20/12/2006</td>
<td>10/04/2007</td>
<td> </td>
<td>01/04/2007</td>
<td> </td>
<td> </td>
<td> </td>
<td>CGO</td>
<td>YES</td>
<td>NO</td>
<td>1</td>
</tr>
<tr>
<td>ATG</td>
<td>Aerotrans Airlines</td>
<td>T154</td>
<td>85569</td>
<td>20/11/2007</td>
<td>10/04/2006</td>
<td> </td>
<td>21/06/2006</td>
<td>21/06/2006</td>
<td>21/06/2006</td>
<td>21/06/2006</td>
<td>PAX</td>
<td>YES</td>
<td>NO</td>
<td>1</td>
</tr>
<tr>
<td>AZQ</td>
<td>Silk Way Airlines</td>
<td>IL76</td>
<td>4KAZ41</td>
<td>08/03/2007</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>CGO</td>
<td>YES</td>
<td>NO</td>
<td>1</td>
</tr>
<tr>
<td>AZV</td>
<td>ASOV - AVIA, Air Company</td>
<td>IL76</td>
<td>URZVC</td>
<td>16/02/2008</td>
<td>16/02/2008</td>
<td> </td>
<td>17/06/2006</td>
<td> </td>
<td> </td>
<td> </td>
<td>CGO</td>
<td>YES</td>
<td>NO</td>
<td>1</td>
</tr>
<tr>
<td>BDS</td>
<td>South Asia Airlines Limited</td>
<td>B707</td>
<td>S2ADU</td>
<td>15/02/2006</td>
<td> </td>
<td>15/07/2006</td>
<td>01/09/2006</td>
<td> </td>
<td> </td>
<td> </td>
<td>CGO</td>
<td>YES</td>
<td>NO</td>
<td>1</td>
</tr>

</tbody>
</table>
<p> </p>
<table width="435" border="0" align="left">
<tr>
<td width="44" class="titles">Date:</td>
<td width="381"> </td>
</tr>
<tr>
<td class="titles">Time:</td>
<td> </td>
</tr>
<tr>
<td class="titles">Page:</td>
<td> </td>
</tr>
<tr>
<td colspan="2"><div align="right"><A HREF="javascript:window.print()" class="titles">Print Page</A></div></td>
</tr>
</table>
<p align="left"> </p>

</body>
</html>

[/html]

:!:

•

Join Date: Dec 2004

Posts: 440

Reputation: Sulley's Boo will become famous soon enough

Solved Threads: 10

Sulley's Boo Sulley's Boo is offline

Offline

Posting Pro in Training

Re: Javascript - Print Date in different color

May 27th, 2006

•

Originally Posted by iamthwee

Perhaps this

you know, i thought that your signature was your reply to my Q .. i was like COMPLETY LOST

.. haha ..

Thanks for the link .. Will try to understand it .. You know I know nothing about Javascript ..

•

Join Date: Dec 2004

Posts: 440

Reputation: Sulley's Boo will become famous soon enough

Solved Threads: 10

Sulley's Boo Sulley's Boo is offline

Offline

Posting Pro in Training

Re: Javascript - Print Date in different color

May 27th, 2006

Is that code fine? I mean the doctype and all that :o

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Javascript - Print Date in different color

May 27th, 2006

Looks good. You can validate it against w3c.org's validators, to be sure.

Ok, the short answer is that you use CSS to style HTML elements. You could create two CSS classes, one for normal color, and one for "old" dates.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<style type="text/css">
.normal
{
  color: black;
}
 
.old
{
  color: red;
}
</style>
<style type="text/css">
.normal
{
  color: black;
}

.old
{
  color: red;
}
</style>

Something like that, to use a simple example. This goes in your HEAD portion of your document.

Then, to apply the style, add the "class" attribute to your tags:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<td class="normal>normal</td>
<td class="old">old</td>
 
<td class="normal>normal</td>
<td class="old">old</td>

The trick is, how to do that programmatically? Again, I suggest server-side. There is no one solution, first you have to decide what language you're going to use, and learn the basics of that language.

I suggest PHP. Daniweb has a great PHP forum.

The basic idea is that you create CSS and HTML to control how the page looks, and then you write a PHP program to output the CSS & HTML. At the time the PHP program runs (which is as soon as a user browses to the page), it can enter the dates into the table, check the dates, and add the correct "class" to the table elements.

Daniweb in fact is a big PHP program.