How to get current time with jQuery

Question

The following returns time in microseconds, for example 4565212462.

alert( $.now() );

How do I convert it to a human readable time format, such as (hours:minutes:seconds)?

You don't need jQuery for `$.now()` since JavaScript has a native implementation: http://stackoverflow.com/questions/20456712/how-to-get-current-time-with-jquery/28036195#28036195 — Josh Crozier, Jan 20 '15 at 01:15
Corrections: (1) This has been replaced with the native Date.now(), and (2) The time returned is in milliseconds, not microseconds. — den232, May 08 '20 at 20:08

score 323 · Accepted Answer · edited Nov 08 '18 at 16:02

323

You may try like this:

new Date($.now());

Also using Javascript you can do like this:

var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
document.write(time);

edited Nov 08 '18 at 16:02

MrMaavin

1,229
2
13
23

answered Dec 08 '13 at 17:48

Rahul Tripathi

152,732
28
233
299

8

Please note that .getHours() returns the hours in the time zone of the local machine. If the user has their browser in another time zone than you, they will get other results from getHours. This also holds true for the .toString() method. Controlling the time zone in javascript is tricky (you have to calculate the offset between your and the desired time zone and modify the date accordingly). So as mentioned in another answer, using moment.js sounds like a good idea. http://momentjs.com/ – Chris May 04 '15 at 08:38
3

You should also consider including padStart to each get: dt.getMinutes().toString.padStart(2, '0') This will ensure that the numbers remain 2 digits long with a padded zero, and it follows proposed javascript functionality - so pretty future proofed: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart – Negative Zero Dec 06 '18 at 19:19
2

@NegativeZero A really useful (if not essential) suggestion. Unfortunately it didn't work for me on Firefox (I didn't test on other browsers). However, rewriting it as String(dt.getMinutes()).padStart(2, '0') works for me. – biscuitstack Mar 15 '19 at 11:37
`moment.js` as alternative is kind of deprecated (say it themselves) and [luxon](https://moment.github.io/luxon) seems a good current alternative – Andreas Covidiot Dec 03 '20 at 21:14
1

@NegativeZero It must be `dt.getMinutes().toString().padStart(2, '0')` with `toString()`. – Christoph Schreiber Feb 10 '21 at 02:27

Philip G · Answer 2 · 2015-03-18T12:48:55.350

You need to fetch all "numbers" manually

like this:

var currentdate = new Date(); 
    var datetime = "Now: " + currentdate.getDate() + "/"
                + (currentdate.getMonth()+1)  + "/" 
                + currentdate.getFullYear() + " @ "  
                + currentdate.getHours() + ":"  
                + currentdate.getMinutes() + ":" 
                + currentdate.getSeconds();

document.write(datetime);

Oriol · Answer 3 · 2013-12-08T18:01:05.027

Convert a Date object to an string, using one of Date.prototype's conversion getters, for example:

var d = new Date();
d+'';                  // "Sun Dec 08 2013 18:55:38 GMT+0100"
d.toDateString();      // "Sun Dec 08 2013"
d.toISOString();       // "2013-12-08T17:55:38.130Z"
d.toLocaleDateString() // "8/12/2013" on my system
d.toLocaleString()     // "8/12/2013 18.55.38" on my system
d.toUTCString()        // "Sun, 08 Dec 2013 17:55:38 GMT"

Or, if you want it more customized, see the list of Date.prototype's getter methods.

score 26 · Answer 4 · edited Jun 20 '20 at 09:12

26

You don't need to use jQuery for this!

The native JavaScript implementation is Date.now().

Date.now() and $.now() return the same value:

Date.now(); // 1421715573651
$.now();    // 1421715573651

new Date(Date.now())   // Mon Jan 19 2015 20:02:55 GMT-0500 (Eastern Standard Time)
new Date($.now());     // Mon Jan 19 2015 20:02:55 GMT-0500 (Eastern Standard Time)

..and if you want the time formatted in hh-mm-ss:

var now = new Date(Date.now());
var formatted = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
// 20:10:58

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 20 '15 at 01:08

Josh Crozier

202,159
50
343
273

1

You don't need to provide parameters to new Date() as it defaults to now. – Andrew Spode Apr 30 '15 at 13:29
1

@Spode Ah, good point. I'm not sure why other answers were using jQuery then. – Josh Crozier Apr 30 '15 at 13:30

score 18 · Answer 5 · answered May 04 '15 at 19:18

.clock {
width: 260px;
margin: 0 auto;
padding: 30px;
color: #FFF;background:#333;
}
.clock ul {
width: 250px;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center
}

.clock ul li {
display: inline;
font-size: 3em;
text-align: center;
font-family: "Arial", Helvetica, sans-serif;
text-shadow: 0 2px 5px #55c6ff, 0 3px 6px #55c6ff, 0 4px 7px #55c6ff
}
#Date { 
font-family: 'Arial', Helvetica, sans-serif;
font-size: 26px;
text-align: center;
text-shadow: 0 2px 5px #55c6ff, 0 3px 6px #55c6ff;
padding-bottom: 40px;
}

#point {
position: relative;
-moz-animation: mymove 1s ease infinite;
-webkit-animation: mymove 1s ease infinite;
padding-left: 10px;
padding-right: 10px
}

/* Animasi Detik Kedap - Kedip */
@-webkit-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } 
}

@-moz-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Making 2 variable month and day
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

// make single object
var newDate = new Date();
// make current time
newDate.setDate(newDate.getDate());
// setting date and time
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

setInterval( function() {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);

setInterval( function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);

setInterval( function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000); 
});
</script>
<div class="clock">
<div id="Date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li id="sec"></li>
</ul>
</div>

score 9 · Answer 6 · answered Dec 08 '13 at 17:50

jQuery.now() Returns: Number

Description: Return a number representing the current time.

This method does not accept any arguments.

The $.now() method is a shorthand for the number returned by the expression (new Date).getTime().

http://api.jquery.com/jQuery.now/

It's simple to use Javascript:

var d = new Date();
var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
console.log(time);

score 5 · Answer 7 · answered Apr 30 '15 at 13:53

jQuery's $.now() is an alias of new Date().getTime(), an internal Javascript function.

http://api.jquery.com/jquery.now/

This returns the number of seconds elapsed since 1970, commonly referred to (not necessarily correctly) as Unix Time, Epoch or Timestamp, depending on the circles you fall in. It can be really handy for calculating the difference between dates/times using simple maths. It doesn't have any TimeZone information and is always UTC.

http://en.wikipedia.org/wiki/Unix_time

There is no need to use jQuery as other than this alias, it does little else to help with date/time manipulation.

If you are looking for a quick and dirty way of representing the time in text, the Javascript Date object has a "toString" prototype that will return an ISO formatted Date Time.

new Date().toString();
//returns "Thu Apr 30 2015 14:37:36 GMT+0100 (BST)"

More than likely though, you will want to customize your formatting. The Date object has the ability to pull out your relevant details so you can build your own string representation.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

var d = new Date(); //without params it defaults to "now"
var t = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
//Will return 14:37:36

However, as you have asked for a jQuery solution - it is perhaps likely that you are working with older browsers. If you want to do more specific things - especially interpreting strings into Date objects (useful for API responses), you might want to look at Moment.js.

http://momentjs.com/

This will ensure cross browser compatibility and has much improved formatting without having to concatenate lots of strings to together! For example:

moment().format('hh:mm:ss');
//Will return 14:37:36

score 5 · Answer 8 · answered May 02 '15 at 20:21

5

I use moment for all my time manipulation/display needs (both client side, and node.js if you use it), if you just need a simple format the answers above will do, if you are looking for something a bit more complex, moment is the way to go IMO.

answered May 02 '15 at 20:21

TheZuck

3,075
1
25
34

score 3 · Answer 9 · answered May 04 '15 at 21:51

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
    function ShowLocalDate()
    {
    var dNow = new Date();
    var localdate= (dNow.getMonth()+1) + '/' + dNow.getDate() + '/' + dNow.getFullYear() + ' ' + dNow.getHours() + ':' + dNow.getMinutes();
    $('#currentDate').text(localdate)
    }
</script>

</head>
<body>
    enter code here
    <h1>Get current local enter code here Date in JQuery</h1>
    <label id="currentDate">This is current local Date Time in JQuery</p>
    <button type="`enter code here button onclick="ShowLocalDate()">Show Local DateTime</button>

</body>
</html>

you can get more information from below link

http://www.morgantechspace.com/2013/11/Get-current-Date-time-in-JQuery.html#GetLocalDateTimeinJQuery

guest271314 · Answer 10 · 2015-05-01T07:01:33.693

1

Try

console.log(
  new Date().toLocaleString().slice(9, -3)
  , new Date().toString().slice(16, -15)
);

edited May 01 '15 at 07:01

answered May 01 '15 at 06:45

guest271314

1
10
82
156

score 1 · Answer 11 · answered May 04 '15 at 06:14

Using JavaScript native Date functions you can get hours, minutes and seconds as you want. If you wish to format date and time in particular way you may want to implement a method extending JavaScript Date prototype.

Here is one already implemented: https://github.com/jacwright/date.format

score 1 · Answer 12 · answered Oct 10 '19 at 07:32

1

<p id="date"></p>

<script>
var d = new Date();
document.getElementById("date").innerHTML = d.toTimeString();
</script>

You can use Date() in JS.

answered Oct 10 '19 at 07:32

Suman Kumar

61
2
7

score 0 · Answer 13 · edited Jun 18 '18 at 08:54

0

For local time in ISO8601 for SQL TIMESTAMP you could try:

var tzoffset = (new Date()).getTimezoneOffset() * 60000;
var localISOTime = (new Date(Date.now() - tzoffset))
  .toISOString()
  .slice(0, 19)
  .replace('T', ' ');
$('#mydatediv').val(localISOTime);

edited Jun 18 '18 at 08:54

Shree

18,997
28
86
133

answered Nov 22 '17 at 02:06

Renzo Fabio Castillo Cáceres

1

score 0 · Answer 14 · answered Apr 17 '19 at 09:45

0

console.log(
  new Date().toLocaleString().slice(9, -3)
  , new Date().toString().slice(16, -15)
);

answered Apr 17 '19 at 09:45

Thendral R

1

Add relevant explanation to your answer – Anantha Raju C Apr 17 '19 at 10:07

score 0 · Answer 15 · edited Feb 28 '20 at 07:38

0

The following

function gettzdate(){
    var fd = moment().format('YYYY-MM-DDTHH:MM:ss');
    return fd ; 
}

works for forcing the current date onto a <input type="datetime-local">

edited Feb 28 '20 at 07:38

Ali

2,174
2
25
39

answered Feb 28 '20 at 06:38

Louis

1

How to get current time with jQuery

15 Answers15

You don't need to use jQuery for this!

Linked