RapidWeaver FAQ - Date and time







Share/Bookmark


How can I have the current date and time displaying on my website? What about countdown or count-up timers?


Here’s an example:

  

Current time:



Of course you can rearrange and style them as you wish. To style the text use

<span>

tags as described in the free sample of my RapidWeaverFAQ.org E-Book, Basic HTML Codes knowledge base.

Chapter 1: Date
Chapter 2: Time
Chapter 3: Countdown timer or count-up timer



Chapter 1: Date


Each of the parameters of the date has its own code. Combine and rearrange the order of the code as you wish.

Code displaying the name of the current day in the week:

<script type="text/javascript">

var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";

document.write("Today is " + weekday[d.getDay()]);

</script>



If you don't want the Today is part to display just replace

document.write("Today is " + weekday[d.getDay()]);



with

document.write(weekday[d.getDay()]);



If English is not your language just replace the name of the days with the name of the days in your language. If you want you can use this code to have an image or image-link displaying instead of the day's name so every Wednesday the same image would display. Just replace the name of the days with the appropriate HTML code. Don't know what the code to add links, images or image-links is? Download the
free sample of my RapidWeaverFAQ.org E-Book and consult the Basic HTML Codes knowledge base. Just make sure to use single quotes (') instead of quotes (") in the code you add.


Code displaying the name of the current month:

<script type="text/javascript">

var m=new Date();
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";

document.write(month[m.getMonth()]);

</script>



If English is not your language just replace the name of the months with the name of the months in your language. If you want you can use this code to have an image or image-link displaying instead of the month's name so every February the same image would display. Just replace the name of the months with the appropriate HTML code. Don't know what the code to add links, images or image-links is? Download the
free sample of my RapidWeaverFAQ.org E-Book and consult the Basic HTML Codes knowledge base. Just make sure to use single quotes (') instead of quotes (") in the code you add.


Code displaying the current date (1-31):

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




Code displaying the current year:

<script type="text/javascript">

var y=new Date();
document.write(y.getFullYear());

</script>




Once you're done with editing the code paste it into RapidWeaver and go to "Format", "HTML" choose "Code". That's it.

Chapter 2: Time


Code to display the current time:

Paste this code into Page Info, Header, JavaScript:

var timer = null
function start(){
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
minutes=((minutes < 10) ? "0" : "") + minutes
var seconds = time.getSeconds()
seconds=((seconds < 10) ? "0" : "") + seconds
var clock = hours + ":" + minutes + ":" + seconds
document.forms[0].display.value = clock
timer = setTimeout("start()",1000)
}



And paste this code where you want the time to appear on your page:

<style type="text/css">
.textfield {
border:solid 0px #000;
background:transparent;
color:#000000;
</style>
<body onload="start()">
<form>
<input type="text" class="textfield" name="display" size="10">
</form>



Once you're done with editing the code paste it into RapidWeaver and go to "Format", "HTML" choose "Code". That's it.

Chapter 3: Countdown time and count-up timer


To do this you can use a script which was originally written by Robert Hashemian. This is what it looks like:

until 2050.

Download countdown.js and upload it to the root of your server (What is the root?)

Copy the following code and edit it as described further on:

<script language="JavaScript">
TargetDate = "12/31/2049 23:59";
BackColor = "transparent";
ForeColor = "black";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds ";
FinishMessage = "Timer done...";
</script>
<script language="JavaScript" src="/countdown.js">



12/31/2049 23:59 defines the target date (start date when using count-up) in month/day/year hour/minutes format
ForeColor = "black"; defines the color of the text. Change black to white or whatever. Of course you can also use color codes or designations like #333333
CountStepper = -1; defines whether you want to use it as a countdown or a count-up timer. Change -1 to +1 for count-up.
In the DisplayFormat line you can change the language of Days, Hours, ... or you can remove the hours, minutes or seconds if you don't want them to display by removing the appropriate part.
FinishMessage = "Timer done..."; instead of Timer done... you can type anything you'd like to appear when the timer is done. You can also use basic HTML to display a link or an image.

Once you're done with editing the code paste it into RapidWeaver and go to "Format", "HTML" choose "Code". That's it.


This FAQ is also discussed in my
RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -


Now share it…

Share