Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 4752

Permalink

May 26th, 2006

Javascript - Print Date in different color

Expand Post »

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.

Similar Threads

how to print table background color? in HTML and CSS
Error reading XML file in Javascript in JavaScript / DHTML / AJAX

Sulley's Boo

Reputation Points: 529

Solved Threads: 10

Posting Pro in Training

Offline

450 posts
since Dec 2004

Permalink

May 26th, 2006

Re: Javascript - Print Date in different color

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?

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

May 26th, 2006

Re: Javascript - Print Date in different color

Perhaps this

iamthwee

Featured Poster

Reputation Points: 1536

Solved Threads: 431

Posting Expert

Offline

5,865 posts
since Aug 2005

Permalink

May 26th, 2006

Re: Javascript - Print Date in different color

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

May 27th, 2006

awww .. thanks ..

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]

:!:

Sulley's Boo

Reputation Points: 529

Solved Threads: 10

Posting Pro in Training

Offline

450 posts
since Dec 2004

Permalink

May 27th, 2006

Re: Javascript - Print Date in different color

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

Sulley's Boo

Reputation Points: 529

Solved Threads: 10

Posting Pro in Training

Offline

450 posts
since Dec 2004

Permalink

May 27th, 2006

Re: Javascript - Print Date in different color

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

Sulley's Boo

Reputation Points: 529

Solved Threads: 10

Posting Pro in Training

Offline

450 posts
since Dec 2004

Permalink

May 27th, 2006

Re: Javascript - Print Date in different color

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.

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:

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

May 27th, 2006

Re: Javascript - Print Date in different color

Thaaaaaaaaaaaanks Tgreeeeeeer

Sulley's Boo

Reputation Points: 529

Solved Threads: 10

Posting Pro in Training

Offline

450 posts
since Dec 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: scrolling images

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: HTML newbie problem!!

DaniWeb Message

Cancel Changes

User Name
Password