JavaScript date suffix formatting

Question

I have done my due diligence in investigating this and not had any success yet. Being rather green with JavaScript I am seeking some help. I am wanting to display the date

NOV2012<br>
2<sup>nd</sup><br>
5:00 PM

I have everything working (not my script) except being able to get the date suffix to change to st, nd, rd, or th as the case may be.

This is what I have:

<pre>  <abbr title="Month">

            <script type="text/javascript">
                      var d=new Date();
                      var month=new Array(12);
                      month[0]="Jan";
                      month[1]="Feb";
                      month[2]="Mar";
                      month[3]="Apr";
                      month[4]="May";
                      month[5]="Jun";
                      month[6]="Jul";
                      month[7]="Aug";
                      month[8]="Sep";
                      month[9]="Oct";
                      month[10]="Nov";
                      month[11]="Dec";
                      document.write(month[d.getMonth()]);
</script></abbr>  

<script type="text/javascript">
    var d = new Date()
    document.write(d.getDate())

    ordinal : function (number) {
            var d = number % 10;
            return (~~ (number % 100 / 10) === 1) ? 'th' :
                (d === 1) ? 'st' :
                (d === 2) ? 'nd' :
                (d === 3) ? 'rd' : 'th';
        }
    });
    </script>
    <sup>%</sup> 
    <abbr><script type="text/javascript">
    var d = new Date()
    document.write(d.getFullYear())
    </script></abbr>
              <sub>

              <script type="text/javascript">
                      <!--
                      var currentTime = new Date()
                      var hours = currentTime.getHours()
                      var minutes = currentTime.getMinutes()
                      if (minutes < 10){
                      minutes = "0" + minutes
                      }
                      document.write(hours + ":" + minutes + " ")
                      if(hours > 11){
                      document.write("PM")
                      } else {
                      document.write("AM")
                      }
                      //-->
            </script>

          </sub>
</pre>

I know the issue is with this part:

<pre> 
<script type="text/javascript">
    var d = new Date()
    document.write(d.getDate())

    ordinal : function (number) {
            var d = number % 10;
            return (~~ (number % 100 / 10) === 1) ? 'th' :
                (d === 1) ? 'st' :
                (d === 2) ? 'nd' :
                (d === 3) ? 'rd' : 'th';
        }
    });


    </script>

   < sup > % < /sup >
</pre>

but I can't seem to work out the right fix. This is where it is sitting:

http://www.bcreativeservices.com/

Thank you as always.

B

Answer 1

Firstly, you have a syntax error assigning ordinal. It looks like you were originally trying to make an object containing the key ordinal, but later changed it.

This is probably what you were going for:

function ordinal(number) {
  var d = number % 10;
  return (~~ (number % 100 / 10) === 1) ? 'th' :
         (d === 1) ? 'st' :
         (d === 2) ? 'nd' :
         (d === 3) ? 'rd' : 'th';
}

Which works, but the double bitwise NOT ~~ makes your code a little difficult to follow. I had to go look up what it was (I never use bitwise math) and I would recommend you not use it (unless you have good reason to be using it, of course).

According to this question on the subject, you do get speed improvements. However, these operations take fractions of microseconds, so the improvement is really negligible and only serves to make your code more difficult to understand.

---

Not too long ago, I wrote a function to provide these suffixes for dates. After some slight modification (I added mine to the Date prototype), you'd get:

function ordinal(date) {
  return (date > 20 || date < 10) ? ([false, "st", "nd", "rd"])[(date%10)] || "th" : "th";
}

Which works on any valid date.

EDIT: It occurs to me that my version of the ordinal function is probably just as impossible to read. For sanity's sake, here's a less condensed version with the same logic:

function ordinal(date) {
  if(date > 20 || date < 10) {
    switch(date%10) {
      case 1:
        return "st";
      case 2:
        return "nd";
      case 3:
        return "rd";
    }
  }
  return "th";
}