Date and Time

**FrickenTrevor** · 08-08-2015, 07:45 AM

I have been trying to find a script that outputs the date and time in something like below

January 1st, 2015
8:23 AM

Using two separate spans like this

Code:

<span id="date">
<span id="time">

Any help would be appreciated

**Beverleyh** · 08-08-2015, 08:35 AM

Here's a nice date/time tutorial http://www.tizag.com/javascriptT/javascriptdate.php that you can work your required formatting around (it isn't really clear what your trying to achieve from what you posted but you should be able to adapt the demo and format to your needs)

document.write() is quite an old method though so you might want to look into using inner.HTML() instead

**FrickenTrevor** · 08-08-2015, 10:46 AM

Something like the Live Date script hosted here, but with the proper abreviations (like 1st, 3rd and so on..) and be able to have the date and time as seperate outputs.
Heres an example

Code:

<script>

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds


var cdate="+dayarray[day]+", "+montharray[month]+" "+daym+"
var time = "+year+" "+hours+":"+minutes+":"+seconds+" "+dn+""
//Separate the date and time into two different strings


if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}

  window.onload = goforit();
</script>
<span id="date"></span>
<span id="time"></span>

**Beverleyh** · 08-08-2015, 11:44 AM

Yes, there are examples of both at the link I posted - here it is again http://www.tizag.com/javascriptT/javascriptdate.php

There's an example of setting am or pm on hours at the bottom of the page so you can use similar logic and basic maths to accomplish the same thing for dates.

Try it out. If you need more help, please post a link to your page with your code.

**FrickenTrevor** · 08-08-2015, 11:49 AM

Originally Posted by Beverleyh

Yes, there are examples of both at the link I posted - here it is again http://www.tizag.com/javascriptT/javascriptdate.php

There's an example of setting am or pm on hours at the bottom of the page so you can use similar logic and basic maths to accomplish the same thing for dates.

If you need more help, please post a link to your page with your code.

Simply posting the link does not help me, I dont have much knowledge of JavaScript so like I said before the link doesnt do much. I was asking if you could help with the code I posted before, or try to explain how to fix it as the code doesnt work.

**vwphillips** · 08-08-2015, 12:54 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<script type="text/javascript">

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
 var mydate=new Date();
 var year=mydate.getFullYear();
 var month=mydate.getMonth();
 var day=mydate.getDay();
 var date=mydate.getDate();
 var hours=mydate.getHours();
 var minutes=mydate.getMinutes();
 var seconds=mydate.getSeconds();
 date=(date<10?'0':'')+date;
 var dn="AM";
 if (hours>=12)
  dn="PM";
 if (hours>12){
  hours-=12;
 }
 if (hours==0)
  hours=12;
 if (minutes<=9)
  minutes="0"+minutes;
 if (seconds<=9)
  seconds="0"+seconds;

 var cdate=dayarray[day]+", "+montharray[month]+" "+date+', '+year;
 var time = hours+":"+minutes+":"+seconds+" "+dn;
//Separate the date and time into two different strings


 document.getElementById("date").innerHTML=cdate;
 document.getElementById("time").innerHTML=time;
}

function goforit(){
 getthedate();
 setInterval("getthedate()",1000);
}

  window.onload = goforit;
</script>
<span id="date"></span><br />
<span id="time"></span>


</body>

</html>

**coothead** · 08-08-2015, 01:53 PM

Hi there FrickenTrevor,

here is another example that includes "1st", "2nd", "3rd" etc...

Code:


<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

</head>
<body>

<div id="date"></div>
<div id="time"></div>

<script>
(function() {
   'use strict';

   var now,yy,mm,dd,hh,mn,ext,am='AM';
   var months=['January','February','March','April','May','June','July',
               'August','September','October','November','December'
              ];

function setTimeAndDate(){

   now=new Date();
   yy=now.getUTCFullYear();
   mm=now.getMonth();
   dd=now.getDate();
   hh=now.getHours();
   mn=now.getMinutes();

switch(dd) {
   case 1:ext='st, ';
       break;
   case 21:ext='st, ';
       break;
   case 31:ext='st, ';
       break;
   case 2:ext='nd, ';
       break;
   case 22:ext='nd, ';
       break;
   case 3:ext='rd,';
       break;
   case 23:ext='rd,';
       break;
   default:ext='th, ';
 }

if(hh<10){
   hh='0'+hh;
 }
if(mn<10){
   mn='0'+mn;
 }
if(hh>11){
   am='PM';
 }

   document.getElementById('date').innerHTML=months[mm]+' '+dd+ext+yy;
   document.getElementById('time').innerHTML=hh+':'+mn+am;
 }

   setInterval(setTimeAndDate,1000);
})();
</script>

</body>
</html>

coothead

**styxlawyer** · 08-08-2015, 02:03 PM

... which may fail for 21st, 22nd, 23rd & 31st! This should give you what you want for all days of the month.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<script type="text/javascript">

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var dayext=new Array(" ", //day 0 not used
										"st","nd","rd","th","th","th","th","th","th","th",
										"th","th","th","th","th","th","th","th","th","th",
										"st","nd","rd","th","th","th","th","th","th","th",
										"st");

function getthedate(){
 var mydate=new Date();
 var year=mydate.getFullYear();
 var month=mydate.getMonth();
 var day=mydate.getDay();
 var date=mydate.getDate();
 var hours=mydate.getHours();
 var minutes=mydate.getMinutes();
 var seconds=mydate.getSeconds();
 var dn="AM";
 if (hours>=12)
  dn="PM";
 if (hours>12){
  hours-=12;
 }
 if (hours==0)
  hours=12;
 if (minutes<=9)
  minutes="0"+minutes;
 if (seconds<=9)
  seconds="0"+seconds;

 var cdate=montharray[month]+" "+day+dayext[day]+", "+year;
 var time = hours+":"+minutes+":"+seconds+" "+dn;
//Separate the date and time into two different strings


 document.getElementById("date").innerHTML=cdate;
 document.getElementById("time").innerHTML=time;
}

function goforit(){
 getthedate();
 setInterval("getthedate()",1000);
}

  window.onload = goforit;
</script>
<span id="date"></span><br />
<span id="time"></span>


</body>

</html>

**FrickenTrevor** · 08-11-2015, 01:12 AM

How do you change it to 12 hour time? Also I did try to make a few modifications of my own.

Code:

(function() {
   'use strict';

   var now,yy,mm,dd,hh,mn,ext,am='AM';
   var months=['January','February','March','April','May','June','July','August','September','October','November','December'];
   var days=[Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];

function setTimeAndDate(){

   now=new Date();
   mm=now.getMonth();
   dd=now.getDate();
   hh=now.getHours();
   mn=now.getMinutes();
   dy=now.getDays();

switch(dd) {
   case 1:ext='st, ';
       break;
   case 21:ext='st, ';
       break;
   case 31:ext='st, ';
       break;
   case 2:ext='nd, ';
       break;
   case 22:ext='nd, ';
       break;
   case 3:ext='rd,';
       break;
   case 23:ext='rd,';
       break;
   default:ext='th, ';
 }

if(hh<10){
   hh='0'+hh;
 }
if(mn<10){
   mn='0'+mn;
 }
if(hh>11){
   am='PM';
 }

   document.getElementById('date').innerHTML='+dy+ '+months[mm]+' '+dd+ext;
   document.getElementById('time').innerHTML=hh+':'+mn+am;
 }

   setInterval(setTimeAndDate,1000);
})();

**Beverleyh** · 08-11-2015, 05:34 AM

What are you attempting to modify in the output? To add the days of the week?

dy=now.getDays(); isn't a valid JS method unfortunately - it should be dy=now.getDay();

And getDay() returns the day of the week (from 0 to 6) - Sunday is 0, Monday is 1... Saturday is 6... So the days array should be;

Code:

var days=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

And to use corresponding items from the array, the output should be + days[dy] +

Thread: Date and Time

Thread Tools

Search Thread

Date and Time

Similar Threads

Time and date based POP UP.

date and time redirection

Seperate Date From Time

DD get date and time script

time & date

Bookmarks

Bookmarks

Posting Permissions