Format date time in jQuery

Question

var date = "2014-07-12 10:54:11";

How can I show this in format 12 Jul, 2014 at 10:51 am ? Is there any function like

var newDate = formatNewDate(date);

From which I can able to get the date time as "12 Jul, 2014 at 10:51 am" ?

Answer 1

var d = new Date();
var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

var date = d.getDate() + " " + month[d.getMonth()] + ", " + d.getFullYear();
var time = d.toLocaleTimeString().toLowerCase();

console.log(date + " at " + time);
// 6 Jul, 2014 at 1:35:35 pm

Or you can have a function

var my_date_format = function(d){
    var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var date = d.getDate() + " " + month[d.getMonth()] + ", " +  d.getFullYear();
    var time = d.toLocaleTimeString().toLowerCase();
    return (date + " at " + time); 
}(new Date());

Usage:

console.log(my_date_format);

2nd solution

var my_date_format = function(input){
    var d = new Date(Date.parse(input.replace(/-/g, "/")));
    var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var date = d.getDate() + " " + month[d.getMonth()] + ", " + d.getFullYear();
    var time = d.toLocaleTimeString().toLowerCase().replace(/([\d]+:[\d]+):[\d]+(\s\w+)/g, "$1$2");
    return (date + " " + time);  
};

console.log(my_date_format("2014-07-12 11:28:13"));
// output 6 Jul, 2014 11:28 am

Check the jsBin

Extra note: Some of date formats aren't supported in all browsers!

// "2014/07/12"      -> yyyy/mm/dd [IE, FF, Chrome]
// "07-12-2014"      -> mm-dd-yyyy [IE, Chrome]
// "July 12, 2014";  -> mmmm dd, yyyy [IE, FF]
// "Jul 12, 2014";   -> mmm dd, yyyy [IE, FF]

Answer 2

I've made a custom date string format function, you can use that.

var  getDateString = function(date, format) {
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        getPaddedComp = function(comp) {
            return ((parseInt(comp) < 10) ? ('0' + comp) : comp)
        },
        formattedDate = format,
        o = {
            "y+": date.getFullYear(), // year
            "M+": months[date.getMonth()], //month
            "d+": getPaddedComp(date.getDate()), //day
            "h+": getPaddedComp((date.getHours() > 12) ? date.getHours() % 12 : date.getHours()), //hour
             "H+": getPaddedComp(date.getHours()), //hour
            "m+": getPaddedComp(date.getMinutes()), //minute
            "s+": getPaddedComp(date.getSeconds()), //second
            "S+": getPaddedComp(date.getMilliseconds()), //millisecond,
            "b+": (date.getHours() >= 12) ? 'PM' : 'AM'
        };

        for (var k in o) {
            if (new RegExp("(" + k + ")").test(format)) {
                formattedDate = formattedDate.replace(RegExp.$1, o[k]);
            }
        }
        return formattedDate;
    };

And now suppose you've :-

    var date = "2014-07-12 10:54:11",
    objDate = Date.parse(date.replace(/-/g, "/"));;

So to format this date you write:-

var formattedDate = getDateString(new Date(objDate ), "d M, y at h:m b")

Answer 3

You can try this:

http://www.webdevelopersnotes.com/tips/html/10_ways_to_format_time_and_date_using_javascript.php3

or this plugin

https://github.com/phstc/jquery-dateFormat

or

refer this SO answer: jQuery date formatting

Answer 4

Is there any function like

No. You have to format it yourself. You have two options: parse the string to create a Date object and generate a formatted string from that, or just use the parts of the string and reformat it. In both cases, it is assumed that you want to treat it as a local date.

Do not be tempted to do:

var d = new Date('2014-07-12 10:54:11')

as some browsers will treat it as UTC, some as local and others won't parse it at all. The following will convert the string to the requested format without creating a Date object:

function formatDate(s){
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var b = s.split(/\D+/);
  return b[2] + ' ' + months[+b[1]] + ', ' + b[0] + ' at ' + (b[3]%12 || 12) +
         ':' + b[4] + ' ' + (b[3] < 12? 'am':'pm');
}

However, if you need to create a Date object for some other reason, the following may help:

function formatDate(s){
  function z(n){return (n<10?'0':'')+n}
  var months = ['Jan','Feb','Mar','Apr','May','Jun',
                'Jul','Aug','Sep','Oct','Nov','Dec'];
  var b = s.split(/\D+/);
  var d = new Date(b[0],--b[1],b[2],b[3],b[5],b[5]);
  return d.getDate() + ' ' + months[d.getMonth()] + ', ' + d.getFullYear() +
         ' at ' + z(d.getHours()%12 || 12) + ':' + z(d.getMinutes()) +
         ' ' + (d.getHours() < 12? 'am':'pm');
}

Answer 5

function convertMysqldate(dateStr) {    // Assuming input:2014-01-30 16:21:09
            var t = dateStr.split(/[- :]/);
            var monthNames = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];
            var year = t[0];
            var month = monthNames[parseInt(t[1])];
            var day = t[2];
            var hourTmp = t[3];
            var minute = t[4];
            var seconds = t[5];
            if (parseInt(hourTmp) > 12) {
                var hour = parseInt(parseInt(hourTmp) – 12) + ‘:’ + minute + ‘:’ + seconds + ‘ PM’;
            } else if (parseInt(hourTmp) === 12) {
                hour = parseInt(hourTmp) + ‘:’ + minute + ‘:’ + seconds + ‘ PM’;
            } else {
                hour = parseInt(hourTmp) + ‘:’ + minute + ‘:’ + seconds + ‘ AM’;
            }
            return (hour + ‘<br>’ + day + ‘ ‘ + month + ‘ ‘ + year);
        }

Copied from here

MySql Date formatting