Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Date and Time

  1. #1
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default Date and Time

    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
    An inline div is a freak of the web and should be beaten until it becomes a span

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    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>
    An inline div is a freak of the web and should be beaten until it becomes a span

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    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.
    An inline div is a freak of the web and should be beaten until it becomes a span

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,450
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    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
    Last edited by coothead; 08-08-2015 at 02:56 PM. Reason: styxlawyer pointed out my forgetfulness and error of my ways!!!
    ~ the original bald headed old fart ~

  8. #8
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

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

  9. #9
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    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);
    })();
    An inline div is a freak of the web and should be beaten until it becomes a span

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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] +
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Time and date based POP UP.
    By laserdude in forum Looking for such a script or service
    Replies: 8
    Last Post: 01-13-2008, 01:51 AM
  2. date and time redirection
    By gisfrancisco in forum PHP
    Replies: 4
    Last Post: 04-16-2007, 01:30 PM
  3. Seperate Date From Time
    By Rooster Cogburn in forum HTML
    Replies: 2
    Last Post: 01-23-2006, 10:40 PM
  4. DD get date and time script
    By ObiCat36 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 07-26-2005, 04:35 PM
  5. time & date
    By adityakakani in forum JavaScript
    Replies: 2
    Last Post: 06-21-2005, 06:46 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •