How to show date time using JQuery?

Question

Here is my JQuery code :

$(document).ready(function() {
    $.clock.locale = {"pt":{"weekdays":["Domingo","Segunda-feira", "Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira", "Sábado"],"months":["Janeiro","Fevereiro","Março","Abril", "Maio","Junho","Julho","Agosto","Setembro","October","Novembro", "Dezembro"] } };
    $(".clock1").clock({"calendar":"false"});
});

My html code is something like <div class="clock1 ></div> With this code I am getting the clock like : 02:29:11 AM. But I want this clock like 2014-02-07 02:29:11 AM. How can I get the date time like this way? Any idea?

moment.js is very easy to use if you're open to using another library — Cory Danielson, Feb 06 '14 at 20:36
I am using other js.Is it possible to get this value like my way using above code? @ Cory Danielson — alamin8031, Feb 06 '14 at 20:39
It'd be helpful if you linked us to the jQuery clock plugin. — Calvin, Feb 06 '14 at 20:40
sure! link is http://jsbin.com/ugapo3/72,In this plugin,I am using clock one. @ Calvin — alamin8031, Feb 06 '14 at 20:44
Doesn't look like that plugin supports a format with the date included. You could add it yourself, but it wouldn't update when the date goes past midnight. — Cory Danielson, Feb 06 '14 at 20:47
You need to use the customTimestamp option. I'll post code in a sec... — Jack, Feb 06 '14 at 20:48
Sounds good,Thanks.I am stuck on this problem. @JackPattishallJr. Pattishall Jr. — alamin8031, Feb 06 '14 at 20:51
See the link I have already shared,I hope you can find solution.Or other clock plugin same as I want will be appreciable.-Cory Danielson. — alamin8031, Feb 06 '14 at 20:55

score 0 · Answer 1 · edited May 23 '17 at 11:56

For a simple date format like 2014-02-07 02:29:11 AM, writing your own is fairly simple.
http://jsfiddle.net/CoryDanielson/g6fR5/

function getFormattedDate(format) {
    var date = new Date(Date.now()),
        formattedDate;

    formattedDate = date.getFullYear() + "-"
                  + handleSingleDigit(date.getMonth()+1) + "-"
                  + handleSingleDigit(date.getDate()) + " "
                  + handleSingleDigit(handleHours(date.getHours())) + ":"
                  + handleSingleDigit(date.getMinutes()) + ":"
                  + handleSingleDigit(date.getSeconds()) + " "
                  + (date.getHours() < 12 ? "AM" : "PM");

    return formattedDate;
}

// Prepends 0 to a single digit number.
function handleSingleDigit(num) {
    return (( num.toString().length === 1 ) ? "0" + num : num);
}

// Accepts an hour 0-23, returns 1-12
function handleHours(hours) {
    hours = (hours > 12 ? hours-12 : hours);
    if ( hours.toString() === "0" ) hours = "12";
    return hours;
}

function updateClock() {
    document.getElementById('clock').innerHTML = getFormattedDate();
}

updateClock();
setInterval(updateClock, 1000);

If this code looks a bit confusing at all ( the ? stuff going on ) take a peek at Ternary Operators and this question on stackoverflow. Other examples here and here.

Jack · Accepted Answer · 2014-02-08T10:43:51.130

Edit - The answer Cory offered makes more sense if you're not using this plugin with the locale options (i.e. - you just need a simple date/time plugin). I would recommend using his script over this.

So, I was wrong about the plugin supporting custom timestamps. (It does for dates, but not formatting - which is what you're looking for...)

I looked into the plugin and extending it wasn't too bad/hard to add the functionality you need. If you still need the plugin (for the locale options), here's a jsfiddle with an example:

http://jsfiddle.net/aJCXp/

What I added is the option to pass "usenumbers" to display the date in your requested format.

{"usenumbers" : "true"}

Here is a link to the gist of the compiled js version:

https://gist.github.com/anonymous/d5ce25f2a2487b2a55d9

And here's a link for the uncompiled version:

https://gist.github.com/anonymous/d5bebcc460d071a17fec

The clock showing the datetime like 2014-02-07 02:29:11 AM,but if I want to calculate time difference between two date place the value in clock,Is it possible do to this?I means the result will show time difference in the place of the clock? — alamin8031, Feb 09 '14 at 07:09

How to show date time using JQuery?

2 Answers2