How can I use Javascript and CSS to display the date?

Dave's Answer:

You're right, this is a job for Javascript, to get the current date and extract the fields desired, and Cascading Style Sheets, to format it in a nice manner.

Let's start with the Javascript snippet. To get the current date in Javascript, you need to create a date object, then access its specific attributes to identify individual items. Here's what I mean:

<script language="javascript" 
  type="text/javascript">
var today = new Date();

That gets you the current date in "today". The two elements we're interested in are the month name and the day of the month number. Unfortunately, the Javascript object has the month number, not the month name, so we're going to have to use a simple array to map number to name. But it's not too bad:

var monthnum = today.getMonth();
var monthname=new Array("JAN","FEB","MAR","APR","MAY",
  "JUN","JUL","AUG", "SEP","OCT","NOV","DEC");
var day=today.getDate();
</script>

Now we have the month number in monthnum and the day of the month in day. They can be output as part of this Javascript snippet thusly: document.write(monthname[monthnum], day) but that doesn't make it easy to add the CSS formatting we need. Instead, let's switch to the CSS for a minute, then we'll go back to how we can actually use the variables we've instantiated.

To have this solution be as portable as possible, I have created a small CSS block that contains three new classes, the overall "outerbox" of the date, the "datebox" with the number, and the "monthbox" with the month name. Here's how they look:

<style type="text/css" rel="stylesheet">
.outerbox { border:1px solid black;padding:0px;
    width:50px;
    overflow:hidden;margin:4px; font-weight:900;
    font-family: verdana,arial,sans-serif; }
.datebox  { font-size:22pt;color:#666;text-align:center;
    border-bottom:1px solid black; }
.monthbox { font-size:11pt;color:#fff;
    background-color:#666; text-align:center; }
</style>

Now, if you've studied CSS, you'll be able to look at this and see what's going on.

The outerbox has a 1 pixel black border, no internal padding, a fixed width of 50 pixels, and a 4 pixel margin. It also will chop off any text inside that won't fit in the box (the "overflow:hidden") so that the date box doesn't get too wonky if someone experiments with very large type. Finally, the outerbox specifies a sans-serif typeface, in bold.

The datebox has 22pt dark gray text, centered, and adds a 1 pixel black line separating the date and the month name. The monthbox is basically the same, using a font size that's half of datebox and inverted colors (that is, white text on a dark gray background).

Put these all together and here's the entire CSS + Javascript + HTML sequence, at once:

<style type="text/css" rel="stylesheet">
.outerbox { border:1px solid black;padding:0px;
    width:50px;
    overflow:hidden;margin:4px; font-weight: 900; 
    font-family: verdana,arial,sans-serif; }
.datebox  { font-size:22pt;color:#666;text-align:center;
    border-bottom:1px solid black; }
.monthbox { font-size:11pt;color:#fff;
    background-color:#666;text-align:center; }
</style>

<script language="Javascript" type="text/javascript">
var today = new Date();
var monthnum = today.getMonth();
var monthname=new Array("JAN","FEB","MAR","APR","MAY",
   "JUN","JUL","AUG","SEP","OCT","NOV","DEC");
var day=today.getDate();
</script>

<div class="outerbox">
<div class="datebox">

<script language="Javascript" type="text/javascript">
document.write(day)
</script>

</div>
<div class="monthbox">

<script language="Javascript" type="text/javascript">
document.write(monthname[monthnum])
</script>

</div>
</div>

And the result, since I know you're dying to see it:

Pretty neat result, I think!

I hope that's what you were seeking when you wrote to me, but if not, I'm sure that this will give you a good start on whatever you are trying to accomplish!