PDA

View Full Version : 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


<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 (http://www.dynamicdrive.com/dynamicindex6/clock3.htm) 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



<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
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
<!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...



<!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.



<!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.



(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;

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

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

coothead
08-11-2015, 09:04 AM
Hi there FrickenTrevor,


further to what Beverley has told you, the code with all the modifications is...



<!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,dy,hh,mn,ext,am='AM';
var months=['January','February','March','April','May','June','July',
'August','September','October','November','December'
];
var days=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday',
'Saturday'
];

function setTimeAndDate(){

now=new Date();
yy=now.getUTCFullYear();
mm=now.getMonth();
dd=now.getDate();
dy=now.getDay();
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>11){
am='PM';
}
if(hh==0) {
hh=12;
}
if(hh>12){
hh=hh-12;
}
if(hh<10){
hh='0'+hh;
}
if(mn<10){
mn='0'+mn;
}


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

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

</body>
</html>


coothead