How To: Add Time/Date to Layouts or Master Page

Source :

 

http://erikswenson.blogspot.in/2012/03/how-to-add-timedate-to-layouts-or.html

To add this JavaScript to your page layout do the following:

  1. Add in the following code anywhere within your page layout:
    <table cellpadding=”0″ cellspacing=”0″>
        <tr>
            <td valign=”top”>
                <script type=”text/javascript”>
                    function getClockTime()
                    {
                        var now    = new Date();
                        var hour   = now.getHours();
                        var minute = now.getMinutes();
                        var second = now.getSeconds();
                        var ap = “<span class=’company-homepagetime-ampm’>AM</span>”;
                        if (hour   > 11) { ap = “<span class=’company-homepagetime-ampm’>PM</span>”;}
                        if (hour   > 12) { hour = hour – 12;      }
                        if (hour   == 0) { hour = 12;             }
                        if (minute < 10) { minute = “0” + minute; }
                        if (second < 10) { second = “0” + second; }
                        var timeString = hour +
                            ‘:’ +
                            minute +
                            ” ” +
                            ap;
                        return timeString;
                    } // function getClockTime()
                        var clockTime = getClockTime();
                        document.write(clockTime);
                </script>
            </td>
        </tr>
        <tr>
            <td valign=”top”>
                <script type=”text/javascript”>
                    var months=new Array(13);
                    months[1]=”January”;
                    months[2]=”Febuary”;
                    months[3]=”March”;
                    months[4]=”April”;
                    months[5]=”May”;
                    months[6]=”June”;
                    months[7]=”July”;
                    months[8]=”August”;
                    months[9]=”September”;
                    months[10]=”October”;
                    months[11]=”November”;
                    months[12]=”December”;
                    var day=new Date();
                    var lmonth=months[day.getMonth() + 1];
                    var date=day.getDate();
                    var year = day.getFullYear();
                    document.write(lmonth + ” ” + date + “, ” + year);
                </script>
            </td>
        </tr>
    </table>
  2. Then Add in the following CSS to give it a little style
    .company-homepagetime{
        color: #000;
        font-family: Arial, sans-serif;
        font-weight: normal;
        font-size: 30px;
        text-align: left;
        padding: 10px 0px 0px 15px;
    }
    .company-homepagetime-ampm{
        color: #000;
        font-family: Arial, sans-serif;
        font-weight: normal;
        font-size: 20px;
        text-align: left;
    }
    .company-homepagedate{
        color: #000;
        font-family: Arial, sans-serif;
        font-size: 14px;
        text-align: left;
        text-transform:uppercase;
        padding: 0px 0px 0px 17px;
    }

The result should look similar to the following:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: