www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Date and Time Help

  1. #1
    Join Date
    Mar 2013
    Posts
    9

    Date and Time Help

    I have a text input form box that has a date time javascript snippet in it to forward date and time of registration when customer hits submit button. When the date time shows up in the database it sometimes is spelled out (Monday March 23, 2013 3:15 pm) and sometimes is only numbers (3/23/2013 3:15 pm). I would be grateful for help to make the script always show the numbers only (3/23/2013 3:15 pm) and not the spelled out version. How do you apply a css to the javascript to change the font size and color? The code is below. Thank you.



    <INPUT name="date_and_time" class="date_and_time"
    type="text">




    <SCRIPT type="text/javascript">
    //<![CDATA[

    function setClock() {
    var today=new Date();
    var clock=today.toLocaleString();
    var date_and_time = document.querySelector('.date_and_time');
    date_and_time.value = "" + clock;
    // document.forms[0][0].value ="Today is " + clock;

    setTimeout("setClock()");
    }

    onload= setClock;

    //]]>
    </SCRIPT>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    Something along these lines? ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <style type="text/css">
     #date_and_time { font-size:2em; color:white; background-color:orange; width:20%; }
    </style>
    </head>
    <body>
    <div id="date_and_time">
    
    <SCRIPT type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?275153-Date-and-Time-Help&daysprune=30
    
    //<![CDATA[
    
    function setClock() {
      var today=new Date();
      var ampm =  'am';  var hr = today.getHours();
      if (hr > 12) { ampm = ' pm'; }
      var clock = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
          clock += ' '+hr+':'+today.getMinutes()+ampm;
      document.getElementById('date_and_time').innerHTML = clock;
      setTimeout("setClock()");
    }
    
    onload= setClock;
    
    //]]>
    </SCRIPT> 
    
    </body>
    </html>

  3. #3
    Join Date
    Mar 2013
    Posts
    9
    Thank you JMRKER for the prompt response. This works great but I need it to appear inside a form text box so my php script can grab the box value and put it into my database. Can you give me the html code to make this script result appear in a HTML form input text box when the page opens? Sorry, I'm a newbie and need to walked around by the hand.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Exclamation

    As a newbie, you should at least attempt a change. If it works, you learn something.
    If it doesn't work, you show your attempt and you learn from our suggested changes.

    I'm bypassing my own advice this time, but in the future, at least try something...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <style type="text/css">
     #date_and_time { font-size:2em; color:white; background-color:orange; width:20%; }
    </style>
    </head>
    <body>
    <input id="date_and_time" id="date_and_time" value="">
    
    <SCRIPT type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?275153-Date-and-Time-Help&daysprune=30
    
    //<![CDATA[
    
    function setClock() {
      var today=new Date();
      var ampm =  'am';  var hr = today.getHours();
      if (hr > 12) { ampm = ' pm'; hr -= 12; }
      var clock = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
          clock += ' '+hr+':'+today.getMinutes()+ampm;
      document.getElementById('date_and_time').value = clock;
      setTimeout("setClock()");
    }
    
    onload= setClock;
    
    //]]>
    </SCRIPT> 
    
    </body>
    </html>

  5. #5
    Join Date
    Mar 2013
    Posts
    9
    I have actually been searching the Internet for the answer for a couple of days before I left this thread. I experimented with script I found on about 20 pages but I couldn't get anything to work exactly the way I wanted. Mixing text areas, databases and Javascript isn't the easiest thing to do for a newbie. I thank you for your help but I don't think you should assume that I haven't tried to figure it out myself. Thanks again. I appreciate your response. This is exactly what I needed.

  6. #6
    Join Date
    Mar 2013
    Posts
    9
    Can you please adjust the code so the "0" shows up before the minute number when it is less than 10. I am getting "3/22/2013 7:4 pm" on the display now. Thank you.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    Quote Originally Posted by ronh100 View Post
    Can you please adjust the code so the "0" shows up before the minute number when it is less than 10. I am getting "3/22/2013 7:4 pm" on the display now. Thank you.
    But that is exactly what you asked for in post #1.
    Have the requirements changed?
    Also, do you need to modify the date (/22/) if it is also less than 10?

    See if you can write the simple function to do this. It's pretty easy.
    At least make an attempt!

  8. #8
    Join Date
    Mar 2013
    Posts
    9
    I got code parts from other web sites and cobbled together a script that actually works but I don't know if it is good code or not. Would you look at my code and let me know if it is good code?

    Code:
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?275153-Date-and-Time-Help&daysprune=30
    //<![CDATA[
    function setClock() {
      var today=new Date();
      var ampm =  'am';  var hr = today.getHours(); var mn = today.getMinutes();
      if (hr > 12) { ampm = ' pm'; hr -= 12; }
      if (mn < 10) { mn = "0" + mn; }
      var clock = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
          clock += ' '+hr+':'+mn+ampm;
      document.getElementById('date_and_time').value = clock;
      setTimeout("setClock()");
    }
    onload= setClock;
    //]]>
    </script>

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    If it works, it's good code.

    you can apply similar logic to the month and day variables.

  10. #10
    Join Date
    Mar 2013
    Posts
    9
    My clock says 12:05 AM when it is 5 minutes after noon and should be 12:05 PM. Help please. Here is my code.

    <SCRIPT type="text/javascript">
    // From: http://www.webdeveloper.com/forum/sh...p&daysprune=30
    //<![CDATA[
    function setClock() {
    var today=new Date();
    var ampm = ' am'; var hr = today.getHours(); var mn = today.getMinutes();
    if (hr > 12) { ampm = ' pm'; hr -= 12; }
    if (mn < 10) { mn = "0" + mn; }
    var clock = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
    clock += ' '+hr+':'+mn+ampm;
    document.getElementById('date_and_time').value = clock;
    setTimeout("setClock()");
    }
    onload= setClock;
    //]]>
    </SCRIPT>

  11. #11
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,137
    Why don't you just chop out of the data object the time code?

    var nowTime = new Date().toUTCString().slice(16,25);

    That gets the time as a 24 Hour format.

    if you want a 12 hour format then you would need to use something like this.

    Code:
    var nowTime = new Date();
    var h = nowTime.getHours();
    var t = [ (h<12? h : h-12) , nowTime.toUTCString().slice(19,22) , (h<12 ? "a":"p") +"m"].join("");
    bit messy but that should do the trick.
    Last edited by \\.\; 01-02-2014 at 04:01 PM.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,137
    Also, please don't use setTimeout repeatedly to update your clock, use setInterval as it only needs setting once. If you look in to it, you have an overhead with setTimeout, although it may be in some eyes a minor point and a small price to pay, in the realms of utilizing script processing and accuracy, repeated calls of setTimeout has an overhead that does eventually build up.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    Alternatively you could modify the original post to...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <style type="text/css">
     #date_and_time { font-size:2em; color:white; background-color:orange; width:20%; }
    </style>
    </head>
    <body>
    <input id="date_and_time" id="date_and_time" value="">
    
    <SCRIPT type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?275153-Date-and-Time-Help&daysprune=30
    
    //<![CDATA[
    
    function setClock() {
      var today=new Date();
      var ampm =  'am';  var hr = today.getHours();  var mn = today.getMinutes();
      if (hr > 11) { ampm = ' pm'; hr -= 12; }
      if (mn < 10) { mn = "0" + mn; }
      var clock = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
          clock += ' '+hr+':'+mn+ampm;
      document.getElementById('date_and_time').value = clock;
    }
    var myTimeVar;
    window.onload = function() {
      setClock();
      myTimeVar = setInterval(function(){setClock()},60000);
    }
    
    //]]>
    </SCRIPT> 
    
    </body>
    </html>
    Note that there is no reason to call the function every second if the display only changes every minute
    unless you need the accuracy for a specific purpose.
    Last edited by JMRKER; 01-02-2014 at 06:44 PM.

  14. #14
    Join Date
    Mar 2013
    Posts
    9
    Thanks JMRKER, this works perfectly for what I'm doing. I very much appreciate your help.

  15. #15
    Join Date
    Mar 2013
    Posts
    9
    Thanks for your reply. I really appreciate having someone out there willing to help those in need.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles