Formatting the date time with Javascript

Question

I have a date/time string like 2012-01-13 04:37:20 but I want to convert it to dd-mm-yyyy hh:mm, how can i do this?

I am using the following code but it throws an exception.

var now = "2012-01-13 04:37:20";
var dd = now.toLocaleDateString() + " " + now.toLocaleTimeString();
alert(dd);

AztecCodes · Accepted Answer · 2024-02-28 19:11:38Z

10

You can do a simple string manipulation and create a JavaScript date object. See function below, which accepts date in format: //yyyy-mm-dd hh:mm:ss

Fiddle Demo here

The Script:

function toJSDate(dateTime) {
  var dateTime = dateTime.split(" "); // dateTime[0] = date, dateTime[1] = time

  var date = dateTime[0].split("-");
  var time = dateTime[1].split(":");


  // month is 0 indexed so date[1] - 1 corrected format
  // (year,    month,       day,     hours,   minutes, seconds, milliseconds)
  return new Date(date[0], date[1] - 1, date[2], time[0], time[1], time[2], 0);
}

edited Feb 28, 2024 at 19:11

AztecCodes

7986 gold badges17 silver badges31 bronze badges

answered Jan 13, 2012 at 7:26

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dzhuang Over a year ago

date[1] should be date[1] - 1 for correct output of month.

thdoan · Accepted Answer · 2016-12-07 06:06:21Z

If you don't need all the features that a library like Moment.js provides, then you can use my port of strftime. It's lightweight (1.35 KB vs. 57.9 KB minified compared to Moment.js 2.15.0) and provides most of the functionality of strftime().

/* Port of strftime(). Compatibility notes:
 *
 * %c - formatted string is slightly different
 * %D - not implemented (use "%m/%d/%y" or "%d/%m/%y")
 * %e - space is not added
 * %E - not implemented
 * %h - not implemented (use "%b")
 * %k - space is not added
 * %n - not implemented (use "\n")
 * %O - not implemented
 * %r - not implemented (use "%I:%M:%S %p")
 * %R - not implemented (use "%H:%M")
 * %t - not implemented (use "\t")
 * %T - not implemented (use "%H:%M:%S")
 * %U - not implemented
 * %W - not implemented
 * %+ - not implemented
 * %% - not implemented (use "%")
 *
 * strftime() reference:
 * http://man7.org/linux/man-pages/man3/strftime.3.html
 *
 * Day of year (%j) code based on Joe Orost's answer:
 * http://stackoverflow.com/questions/8619879/javascript-calculate-the-day-of-the-year-1-366
 *
 * Week number (%V) code based on Taco van den Broek's prototype:
 * http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html
 */
function strftime(sFormat, date) {
  if (!(date instanceof Date)) date = new Date();
  var nDay = date.getDay(),
    nDate = date.getDate(),
    nMonth = date.getMonth(),
    nYear = date.getFullYear(),
    nHour = date.getHours(),
    aDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    aMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    aDayCount = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
    isLeapYear = function() {
      return (nYear%4===0 && nYear%100!==0) || nYear%400===0;
    },
    getThursday = function() {
      var target = new Date(date);
      target.setDate(nDate - ((nDay+6)%7) + 3);
      return target;
    },
    zeroPad = function(nNum, nPad) {
      return ('' + (Math.pow(10, nPad) + nNum)).slice(1);
    };
  return sFormat.replace(/%[a-z]/gi, function(sMatch) {
    return {
      '%a': aDays[nDay].slice(0,3),
      '%A': aDays[nDay],
      '%b': aMonths[nMonth].slice(0,3),
      '%B': aMonths[nMonth],
      '%c': date.toUTCString(),
      '%C': Math.floor(nYear/100),
      '%d': zeroPad(nDate, 2),
      '%e': nDate,
      '%F': date.toISOString().slice(0,10),
      '%G': getThursday().getFullYear(),
      '%g': ('' + getThursday().getFullYear()).slice(2),
      '%H': zeroPad(nHour, 2),
      '%I': zeroPad((nHour+11)%12 + 1, 2),
      '%j': zeroPad(aDayCount[nMonth] + nDate + ((nMonth>1 && isLeapYear()) ? 1 : 0), 3),
      '%k': '' + nHour,
      '%l': (nHour+11)%12 + 1,
      '%m': zeroPad(nMonth + 1, 2),
      '%M': zeroPad(date.getMinutes(), 2),
      '%p': (nHour<12) ? 'AM' : 'PM',
      '%P': (nHour<12) ? 'am' : 'pm',
      '%s': Math.round(date.getTime()/1000),
      '%S': zeroPad(date.getSeconds(), 2),
      '%u': nDay || 7,
      '%V': (function() {
              var target = getThursday(),
                n1stThu = target.valueOf();
              target.setMonth(0, 1);
              var nJan1 = target.getDay();
              if (nJan1!==4) target.setMonth(0, 1 + ((4-nJan1)+7)%7);
              return zeroPad(1 + Math.ceil((n1stThu-target)/604800000), 2);
            })(),
      '%w': '' + nDay,
      '%x': date.toLocaleDateString(),
      '%X': date.toLocaleTimeString(),
      '%y': ('' + nYear).slice(2),
      '%Y': nYear,
      '%z': date.toTimeString().replace(/.+GMT([+-]\d+).+/, '$1'),
      '%Z': date.toTimeString().replace(/.+\((.+?)\)$/, '$1')
    }[sMatch] || sMatch;
  });
}

Sample usage:

// Returns "15-09-2016 16:20"
strftime('%d-%m-%Y %H:%M');

// You can optionally pass it a Date object
// Returns "01-01-2016 21:30"
strftime('%d-%m-%Y %H:%M', new Date('Jan 1, 2016 9:30 PM'));

The latest code is available here: https://github.com/thdoan/strftime

gdm · Accepted Answer · 2016-04-13 12:44:56Z

7

The best date-time handling lib in JavaSCript is moment.

moment().format('MMMM Do YYYY, h:mm:ss a');

answered Apr 13, 2016 at 12:44

gdm

8,0464 gold badges46 silver badges74 bronze badges

Comments

David Clarke · Accepted Answer · 2015-10-26 21:05:49Z

Use either simple string manipulation (as suggested by @SKS) or use a library. The latter is more flexible and lets you change the input or output format easily. For example, using the Globalize.js library, you would write:

var dd = Globalize.parseDate(now, "yyyy-MM-dd HH:mm:ss");
dd = Globalize.format(dd, "dd-MM-yyyy HH:mm");

Note however that formats such as "dd-mm-yyyy hh:mm" are confusing – it is neither a standard ISO format nor any localized (language-dependent) format. The Globalize.js library lets you use predefined language-dependent formats in addition to explicitly specified formats.

Note that the built-in date and time parsing and formatting routines in JavaScript are implementation-dependent. Using them means non-portable code. For example, there is no guarantee that new Date() will accept the format you have as input, and toLocaleDateString() writes the date in some locale-dependent format, which can be just about anything.

Berker Yüceer · Accepted Answer · 2020-12-10 13:37:34Z

A small but effective function, as follows:

var formatTime = function(time, format){
    time = typeof time == 'number' ? new Date(time) : time;
    format = format || 'yyyy-mm-dd hh:MM:ss';
    var add0 = function(t){ return t < 10 ? '0' + t : t; };
    var year = time.getFullYear();
    var month = time.getMonth() + 1; // 0 indexed
    var date = time.getDate();
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
    var replaceMent = {
        'yyyy': year,
        'mm': add0(month),
        'm': month,
        'dd': add0(date),
        'd': date,
        'hh': add0(hours),
        'h': hours,
        'MM': add0(minutes),
        'M': minutes,
        'ss': add0(seconds),
        's': seconds
    }
    for(var key in replaceMent){
        format = format.replace(key, replaceMent[key]);
    }
    return format;
}

Example usage:

// As Date Input
formatTime(new Date()); // 2020-12-10 16:29:32
// As Date Input
formatTime(new Date(),"yyyy-mm-dd"); // 2020-12-10
// OR
formatTime(new Date(),"hh:MM:ss"); // 16:29:32
// As Time Input
formatTime(new Date().getTime()); // 2020-12-10 16:29:32
// OR
formatTime(1607606809630); // 2020-12-10 16:29:32
// OR
formatTime(1607606809630,"yyyy-mm-dd"); // 2020-12-10
// OR
formatTime(1607606809630,"hh:MM:ss"); // 16:29:32

Benjamin Lowry · Accepted Answer · 2017-01-30 12:52:11Z

3

I think it is best to use the Intl.DateTimeFormat class.

The usage is fairly straightforward. You can not enter a pattern as you want to, but it will give you the results you want.

Here is an example on how to use it:

public formatDate(date : Date) : string{
    var options = {  year: 'numeric', month: 'short', day: 'numeric' };
    return new Intl.DateTimeFormat('de-DE', options).format(date);
}

If you really want to enter a DateTimeFormat string, it would be easy enough to write a function which parses the string using Regex, but I don't think it is needed.

For further Information go here:

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

edited Jan 30, 2017 at 12:52

Benjamin Lowry

3,8491 gold badge26 silver badges29 bronze badges

answered Jan 30, 2017 at 11:51

PartTimeIndie

1065 bronze badges

1 Comment

Peter T. Over a year ago

Good to know that this exists, but this is not available on all platforms as described in the mozilla reference

Iman Bahrampour · Accepted Answer · 2017-10-13 08:22:24Z

2

For working with DateTimes in javascript it's better to use the 'Intl.DateTimeFormat' as follow:

var date = new Date('2012-01-13 14:37:20');
var options = { year: 'numeric', month: '2-digit', day: '2-digit',
hour:'2-digit', minute: '2-digit',hour12: false};
console.log(new Intl.DateTimeFormat('en-US', options).format(date).replace(/\//g,'-').replace(',',''));

Result: "01-13-2012 14:37"

The date and time formats can be customized with options argument.

Check Online

edited Oct 13, 2017 at 8:22

answered Oct 13, 2017 at 8:05

Iman Bahrampour

6,8562 gold badges45 silver badges65 bronze badges

Comments

Nagaraju Badaeni · Accepted Answer · 2012-01-13 10:52:29Z

0

Date requires Date object so you should give var d = new Date() something like this then for formatting see http://code.google.com/p/datejs/ link it will be helpful.

answered Jan 13, 2012 at 10:52

Nagaraju Badaeni

9008 silver badges14 bronze badges

Comments

Jan · Accepted Answer · 2019-09-06 07:58:04Z

0

Love one liners - local date SPACE time DOT milliseconds / IIFE:

// simpler, but milliseconds not padded
console.log(
(function(d){return d.toLocaleDateString() + ' ' + d.toLocaleTimeString() + '.' + d.getMilliseconds()})(new Date())
)

// including millis padding
console.log(
(function(d){return d.toLocaleDateString() + ' ' + d.toLocaleTimeString() + '.' + (d.getMilliseconds()+1000+'').substr(1)})(new Date())
)

answered Sep 6, 2019 at 7:58

Jan

2,2463 gold badges19 silver badges30 bronze badges

Comments

Jim Garrison · Accepted Answer · 2012-01-13 07:20:38Z

-1

Your variable now is a String object and toLocaleDateString method needs a Date object. See w3schools

edited Jan 13, 2012 at 7:20

Jim Garrison

87k20 gold badges162 silver badges197 bronze badges

answered Jan 13, 2012 at 7:18

silppuri

3371 silver badge4 bronze badges

Comments

Kodie Grantham · Accepted Answer · 2018-03-04 19:00:34Z

-1

Easily accomplished by my date-shortcode package:

const dateShortcode = require('date-shortcode')
dateShortcode.parse('{DD-MM-YYYY hh:mm}', '2012-01-13 04:37:20')
//=> '13-01-2012 04:37'

answered Mar 4, 2018 at 19:00

Kodie Grantham

2,0372 gold badges23 silver badges28 bronze badges

Comments

RAY · Accepted Answer · 2018-11-25 13:24:11Z

-1

With Jquery, you steal datepicker's feature like that:

$.datepicker.formatDate( "dd-M-yy", new Date())

answered Nov 25, 2018 at 13:24

RAY

2,3092 gold badges19 silver badges20 bronze badges

1 Comment

lukas84 Over a year ago

Nice idea when you don't want to add moment.js, but you already have datepicker at your disposal!

Collectives™ on Stack Overflow

Formatting the date time with Javascript

12 Answers 12

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related