jQuery Time Conversion

Forum Moderators: open

Message Too Old, No Replies

jQuery Time Conversion

whyyi

4:22 pm on Nov 1, 2010 (gmt 0)

Bit of a newbie here. But does anybody know how to convert a time pulled from a data base into something more readable? (has to be done via jquery)

from db: 15:45:00
would like to be: 3:45 pm

Been searching all over and can't find anything. Thanks a ton!

Fotiman

5:36 pm on Nov 1, 2010 (gmt 0)


<!DOCTYPE html>
<html>
<head>
<title>Custom Date Formatting</title>
</head>
<body>
<div id="foo">11:45:00</div>
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
var fromDB = $('#foo').html(),
  a = fromDB.split(":"),
  h,
  pm;
if (a[0] > 12) {
  h = a[0] % 12;
  pm = true;
}
else {
  h = a[0];
  pm = false;
}
$('#foo').html(h + ":" + a[1] + (pm ? " pm" : " am"));
</script>
</body>
</html>

enigma1

7:07 pm on Nov 1, 2010 (gmt 0)

If you wanted to get the date/time from a database why not formating it at the server end and in your js do just an ajax call?

<script type="text/javascript">
$(function() {
$('some-class').click(function(e) {
var url = $(this).attr('href');
$.get( url, function(data) {
// Output date here
$('#foo').html(data);
});
return false;
});
});
</script>

You will need a selector and url for the ajax call, somewhere in your html.

<a href="get_date.php" class="some-class" target="_blank">Get Date</a>
<div id="foo"></div>

I am only assuming you will need to have the date/time updated dynamically on click or with a timer etc.

whyyi

7:54 pm on Nov 1, 2010 (gmt 0)

Thank you very much for replying.

Fotiman this worked perfect. Thank you so much, you have no idea how much time you just saved me!

Enigma1 thanks but I can't format it on the server end (multiple reasons that I don't want to get into)

Thanks again!

willybfriendly

9:56 pm on Nov 1, 2010 (gmt 0)

h = a[0] % 12;

Wonderful example of the use of the modulo operator! Thanks...

astupidname

7:48 am on Nov 2, 2010 (gmt 0)

hmmm..., Fotiman is usually way more "on the ball" than this, but I must correct. :) This little test of that code he posted should tell you why:

<div id="foo"></div>
<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
 
var tests = ['00:00:00', '09:30:00', '12:00:00', '15:07:00', '23:59:59'];
 
for (var i = 0, len = tests.length; i < len; i++) {
var fromDB = tests[i],
  a = fromDB.split(":"),
  h,
  pm;
if (a[0] > 12) {
  h = a[0] % 12;
  pm = true;
}
else {
  h = a[0];
  pm = false;
}
$('#foo').append(fromDB +' = '+ h + ":" + a[1] + (pm ? " pm" : " am") +'<br>');
}
</script>

The corrections I would make (and indeed need making):

<div id="foo"></div>
<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
 
var tests = ['00:00:00', '09:30:00', '12:00:00', '15:07:00', '23:59:59'];
 
for (var i = 0, len = tests.length; i < len; i++) {
    var h, pm,
        fromDB = tests[i],
        a = fromDB.split(":"),
        a0 = parseInt(a[0], 10); //need to ensure integer type here rather than string
    h = (a0 === 0) ? 12 : ((a0 > 12) ? a0 - 12 : a0); //never heard of 00:00 a.m.,
     //and we can assume a0 will never be greater than 23.
    pm = (a0 >= 12); //straight boolean, note the greater than OR EQUAL TO, noon is p.m.
    $('#foo').append(fromDB +' = '+ h + ":" + a[1] + ((pm) ? " pm" : " am") +'<br>');
}
</script>

I'm sure he was tired from counting his money or something.... :)

Fotiman

2:41 pm on Nov 2, 2010 (gmt 0)

astupidname, nice catch. Yeah, I posted that rather hastily, without even a comment on it... I was just short on time. Sloppy work on my part. :)

To clarify, my example fails when the hour is "00" (should be replaced with "12"), and when the time is 12:00 - 12:59 (it will report as "am" instead of "pm").

Here's my updated version with astupidname's fixes. I've also put it into a function.


<!DOCTYPE html>
<html>
<head>
<title>Custom Date Formatting</title>
</head>
<body>
<div class='time'>00:00:00</div>
<div class='time'>00:01:00</div>
<div class='time'>01:08:00</div>
<div class='time'>08:00:00</div>
<div class='time'>11:09:59</div>
<div class='time'>12:00:00</div>
<div class='time'>12:59:59</div>
<div class='time'>13:00:00</div>
<div class='time'>23:59:59</div>
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
function formatTime(s) {
  var a = s.split(":"),
    h = parseInt(a[0], 10),
    result = (h === 0 ? 12 : (h > 12 ? (h - 12) : h)) + ':' + a[1] + (h >= 12 ? ' pm' : ' am');
  return result;
}
$('.time').each(function (index) {
  $(this).html(formatTime($(this).html()));
});
</script>
</body>
</html>

whyyi

7:50 pm on Nov 2, 2010 (gmt 0)

Thank you for the fix, didn't catch the "00" error but would have eventually. :)

Thanks so much again!