Javascript format date / time

Question

I need to change a date/time from 2014-08-20 15:30:00 to look like 08/20/2014 3:30 pm

Can this be done using javascript's Date object?

Answer 1

Yes, you can use the native javascript Date() object and its methods.

For instance you can create a function like:

function formatDate(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return (date.getMonth()+1) + "/" + date.getDate() + "/" + date.getFullYear() + "  " + strTime;
}

var d = new Date();
var e = formatDate(d);

alert(e);

And display also the am / pm and the correct time.

Remember to use getFullYear() method and not getYear() because it has been deprecated.

DEMO http://jsfiddle.net/a_incarnati/kqo10jLb/4/

Answer 2

Please do not reinvent the wheel. There are many open-source and COTS solutions that already exist to solve this problem.

Recommended

The following libraries are recommended for new projects.

Luxon (timezones, successor to Moment)

Luxon is the successor to the Moment.js library. It has native time zone and Intl support.

const { DateTime } = luxon;

const value = DateTime
  .fromFormat("2014-08-20 15:30:00", "yyyy-MM-dd HH:mm:ss")
  .toFormat('MM/dd/yyyy h:mm a');

console.log(value); // 08/20/2014 3:30 PM

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.3.0/luxon.min.js"></script>

js-joda (fixes the Date object)

This is a port of the Joda-Time library in Java. Joda-Time became the java.time package in the Java JDK in version 1.8. It is the successor to the Date object and improves it significantly.

const { DateTimeFormat, DateTimeFormatter, LocalDateTime } = JSJoda;
const { Locale } = JSJodaLocale;

const value = LocalDateTime
  .parse('2014-08-20 15:30:00',
    DateTimeFormatter.ofPattern('yyyy-M-d HH:mm:ss'))
  .format(DateTimeFormatter.ofPattern('MM/dd/yyyy h:mm a')
    .withLocale(Locale.US));
  
console.log(value); // 08/20/2014 3:30 PM

<script src="https://cdn.jsdelivr.net/npm/js-joda@1.11.0/dist/js-joda.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@js-joda/locale_en@4.8.10/dist/index.min.js"></script>

date-fns (fast, tree-shaking, server-side)

This is version 1.x, if you are using Node.js or another server-side JavaScript engine, you should use version 2.x.

const value = dateFns.format(
  dateFns.parse("2014-08-20 15:30:00", "yyyy-MM-dd HH:mm:ss"),
  'MM/DD/YYYY h:mm a');

console.log(value); // 08/20/2014 3:30 pm

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>

Day.js (smallest footprint)

A minimalist date library with plugins.

const value = dayjs("2014-08-20 15:30:00", "yyyy-MM-dd HH:mm:ss")
  .format('MM/DD/YYYY h:mm a');

console.log(value); // 08/20/2014 3:30 pm

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/plugin/customParseFormat.min.js"></script>

date-and-time (small footprint)

A minimalist date library with plugins.

const value = date.format(
  date.parse("2014-08-20 15:30:00", "YYYY-MM-DD HH:mm:ss"),
  'MM/DD/YYYY h:mm A');

console.log(value); // 08/20/2014 3:30 PM

<script src="https://cdn.jsdelivr.net/npm/date-and-time@3.0.0/date-and-time.min.js"></script>

Not recommended

The following libraries are not recommended for new projects, because they are either no longer supported or do not follow best practices.

Moment (timezones, legacy)

Here is the original version using Moment. Since Luxon is the successor to Moment, I have included this as an alternative.

const value = moment('2014-08-20 15:30:00').format('MM/DD/YYYY h:mm a');

console.log(value); // 08/20/2014 3:30 pm

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Date.js (small footprint, archived)

This library manipulates the Date prototype. This is not considered best practice.

const value = Date.parse('2014-08-20 15:30:00').toString('MM/dd/yyyy hh:mm tt');

console.log(value); // 08/20/2014 03:30 PM

<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>

Without a library

Now, if you really don't want to use a library, a simple tokenizer can assist you in parsing and formatting.

const TOKENS = new Set(['Y', 'M', 'D', 'H', 'h', 'm', 's', 'a']);

const main = () => {
  const value = format(parse('2014-08-20 15:30:00', 'YYYY-MM-DD HH:mm:ss'), 'MM/DD/YYYY h:mm a');
  console.log(value); // 08/20/2014 3:30 pm
};

const parse = (input, pattern) =>
  (tokens => new Date(
    +tokens['Y'] , +tokens['M'] - 1 , +tokens['D'],
    +tokens['H'] , +tokens['m']     , +tokens['s']
  ))(tokenize(input, pattern));

const format = (date, pattern) =>
  pattern.replace(/\b(\w)(\1)*\b/g, (match) => {
    switch (match[0]) {
      case 'Y': return date.getFullYear();
      case 'M': return `${date.getMonth() + 1}`.padStart(match.length, '0');
      case 'D': return `${date.getDate()}`.padStart(match.length, '0');
      case 'h': return `${date.getHours() % 12}`.padStart(match.length, '0');
      case 'm': return `${date.getMinutes()}`.padStart(match.length, '0');
      case 'a': return date.getHours() < 12 ? 'am' : 'pm';
    }
    return capture;
  });

const tokenize = (input, pattern) => 
  pattern.split('').reduce((acc, token, index) => TOKENS.has(token)
    ? { ...acc, [token]: (acc[token] ?? '') + input[index] }
    : acc, {});

main();

Answer 3

For the date part:(month is 0-indexed while days are 1-indexed)

var date = new Date('2014-8-20');
console.log((date.getMonth()+1) + '/' + date.getDate() + '/' +  date.getFullYear());

for the time you'll want to create a function to test different situations and convert.

Answer 4

I don't think that can be done RELIABLY with built in methods on the native Date object. The toLocaleString method gets close, but if I am remembering correctly, it won't work correctly in IE < 10. If you are able to use a library for this task, MomentJS is a really amazing library; and it makes working with dates and times easy. Otherwise, I think you will have to write a basic function to give you the format that you are after.

function formatDate(date) {
    var year = date.getFullYear(),
        month = date.getMonth() + 1, // months are zero indexed
        day = date.getDate(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds(),
        hourFormatted = hour % 12 || 12, // hour returned in 24 hour format
        minuteFormatted = minute < 10 ? "0" + minute : minute,
        morning = hour < 12 ? "am" : "pm";

    return month + "/" + day + "/" + year + " " + hourFormatted + ":" +
            minuteFormatted + morning;
}

Answer 5

You can do that:

function formatAMPM(date) { // This is to display 12 hour format like you asked
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return strTime;
}

var myDate = new Date();
var displayDate = myDate.getMonth()+ '/' +myDate.getDate()+ '/' +myDate.getFullYear()+ ' ' +formatAMPM(myDate);
console.log(displayDate);

Fiddle