Help - Search - Members - Calendar
Full Version: A different date format just for fun.
Movable Type Community Forum > Additional Resources > Tips and Tricks
kgish
Alright, this looks pretty good but let's make it even better.

What I want to do now is replace the "printed" day with a fancy-looking image for the day. Each day is then represented by images with the names: Monday.jpg, Tuesday.jpg, ..., Sunday.jpg. Also, I am assuming that the day part is indicated within "::" markers, so the date format results in the following: "::Friday:: December 7th 2001". The code changes look like the following.
CODE
<MTDateHeader>
<script language="JavaScript">
<!--
WriteTheDate('<$MTEntryDate format="::%A:: %B %e %Y"$>', 3);
// -->
</script>
<noscript>
<div class="date"><br />
<$MTEntryDate format="::%A:: %B %e %Y"$>
</div><br />
</noscript>
</MTDateHeader>

Notice that I have move the div-tags within the javascript stuff, as I will be needing it for the WriteTheDate() function.

Okay, the function WriteTheDate() is pretty much the same, except at the end where a check is made for a day enclosed between "::" markers, like this.
CODE
function WriteTheDate(dt, n)
{
   var i;
   var ind;
   var gif;
   ...

   ...
   if (s.substr(0, 2) == "::")
   {
       s = s.substr(2);
       ind = s.indexOf("::");
       if (ind != -1)
       {
           gif = s.substr(s, ind) + ".gif";
           s = s.substr(ind+2);
           s = "<TABLE border='0' cellspacing='0' cellpadding='0'><TR><TD valign='middle'><img src=" + gif + " /></TD><TD valign='middle'><div class='date' style='padding-bottom:3px;'>" + s + "</div></TD></TR></TABLE>";
       }
   }

   if (gif == "")
   {
       s = "<div class='date'>" + s + "</div>";
   }

   document.write(s);
}

Basically, if the day is found inbetween "::" markers, then it is extracted to generate the gif-file name, eg. "::Sunday::" will generate the gif-file name "Sunday.gif". The complicated table stuff is required in order to make sure that the image is centered properly in relation to the following text. Perhaps there is a better and more elegant way to achieve this, but this is a suitable quick-and-dirty method (for which I am famous). Note that the div-tags are embedded within the table in order to preserve the required class formatting.

If you have made it this far and are excited about this state-of-the-art improvement to the endless possibilities of Moveable Type, then I invite all of you to have a look at my blog Random Thoughts and judge it for yourself.

This has been yet another lesson in javascript. Yes, javascript can be fun, but beware that it does not get you hooked (like it did me, poor soul). I hope this excercise has been helpful to someone out there. wink.gif

For those of you looking for another challenge in life, you might want to attempt the following. Extend my example to include the months and optionally the days using gifs. Good luck.
kgish
.:Here's a tip that someone out there might like:.

I was playing with the endless possibilities of Movable Type into the wee hours of the morning, when I got it into my head that I wanted to change the date format. As if the long list of date format specifiers were not enough already. Well for a perfectionist like myself, I am always stretching the limits.

The day should include the proper suffixes, eg. 1st, 2nd, 3rd, 4th, 5th, ... , 20th, 21st, 22nd, 23rd, 24th, ... , 30th and 31st. Just to be cute.

You need to put the following javascript in the spot where the re-formatted date is to be displayed.
CODE
<script language="JavaScript">
<!--
WriteTheDate('<$MTEntryDate format="%A %B %e %Y"$>', 3);
// -->
</script>
<noscript>
<$MTEntryDate format="%A %B %e %Y"$>
</noscript>

This calls the function WriteTheDate(s, n), where s is the formatted string with whitespace between the %-elements and n indicates the %-element number which is the day to be suffixed. For you folks out there who do not know it already, you should always include the noscript-tags for those poor souls out there who still do not have a browser that supports javascript. Hard to believe, but they actually still exist (somewhere under a large stone, I think).

For example, say that the resulting string is "Wednesday December 5 2001" then calling the function WriteTheDate('<$MTEntryDate format="%A %B %e %Y"$>', 3) would result in: "Wednesday December 5th 2001". What an infinite improvement, don't you think?

Oh yeah, you are probably wondering what this special date re-formatter function looks like. Well, in the spirit of freebies and exchanging useful information in order to improve the universe, here it is. Put in the header, eg. between the head-tags.
CODE
<script language="javascript" type="text/javascript">
<!--
function WriteTheDate(dt, n)
{
   var i;
   var s = dt;
   var xxp = /[ \t]+/;
   var arr = dt.split(xxp);
   if (n >= 0 && n < arr.length)
   {
       s = "";
       n--;
       for (i = 0; i < arr.length; i++)
       {
           s += arr[i];
           if ( i == n)
           {
               switch(arr[i])
               {
               case "1":
               case "21":
               case "31":
                   s += "st";
                   break;
               case "2":
               case "22":
                   s += "nd";
                   break;
               case "3":
               case "23":
                   s += "rd";
                   break;
               default:
                   s += "th";
                   break;
               }
           }
           if (i < arr.length - 1)
           {
               s += " ";
           }
       }
   }
   document.write(s);
}
//-->
</script>

I am pretty sure this works, but it could very well contain some kind of dormant bug waiting to strike. If that is the case, then please tell all of us fine MT-folks via this discussion forum. Also, this function is not so smart that it can parse a date string where the day is directly followed by a comma, say like this.
CODE
WriteTheDate('<$MTEntryDate format="%A %B %e, %Y"$>', 3)

This ALWAYS results in "Wednesday December 5,th 2001" (oops). Anyone out there willing to take the challenge to include this option in the code also? Good luck.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.