CODEWITHSUNDEEP
javascript
david
david

Reputation: 6805

How to format this date/time in javascript?

How do I convert

2018-05-07T17:51:17.258000-07:00

into:

May 7, 2018, 5:51 p.m.

using javascript.

I am completely new to javascript and cannot figure this out.

Upvotes: 0

Views: 67

Answers (3)

dejakob
dejakob

Reputation: 2102

There are plenty of options.

  1. (easy) Use a JavaScript library

Check out https://momentjs.com They have a .format method that is very easy to user

moment('2018-05-07T17:51:17').format('MMM DD, YYYY, h:mm a')
  1. (easy) Use system date format

Instead of using a custom format, you could opt for using .toLocaleString() which will format the date towards the language settings of the machine it runs on.

new Date('2018-05-07T17:51:17').toLocaleString();
  1. (complex) Write a custom format method in vanilla JavaScript.

JS itself is quite complicated when it comes to manipulating dates, but definitely possible. It's recommended to read the docs of all methods on the Date Object (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Date.prototype_Methods), because some might return a slightly different result than what you would expect if you're new to JavaScript.

Check out this fiddle: https://jsfiddle.net/3graf72m/ I added some comments to explain what I did

const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

document.body.innerHTML = getFormattedDate(new Date('2018-05-07T17:51:17'));

/**
 * Get the formatted date
 * @param {Date} date
 * @returns {String}
 */
function getFormattedDate(date) {
  const month = getMonthName(date);
  const day = getNumericDay(date);
  const year = getYear(date);

  let hour = (date.getHours() + 12) % 12;
  if (hour === 0) {
    hour = 12;
  }

  let minute = date.getMinutes();
  if (minute.length === 1) {
    minute = `0${minute}`;
  }

    const isAm = date.getHours() < 12;
  return `${month} ${day}, ${hour}:${minute} ${isAm ? 'a.m.' : 'p.m.'}`;
}

/**
 * Get the name of the month
 * @param {Date} date
 * @returns {String}
 */
function getMonthName(date) {
  // getMonth returns 0-based value
    const zeroBasedMonthInt = date.getMonth();
    return MONTHS[zeroBasedMonthInt];
}

/**
 * Get number value of the day of the month of a date
 * @param {Date} date
 * @returns {Number}
 */
function getNumericDay(date) {
  // .getDay returns zero-based day in week (starting from Sunday)
  // .getDate returns day of month (starting with 1)
    return date.getDate();
}

/**
 * Get the full year of a date
 * @param {Date} date
 * @returns {Number}
 */
function getYear(date) {
  // getYear returns year since 1900
    // getFullYear returns year (starting from 0)
    return date.getFullYear();
}

Upvotes: 0

trincot
trincot

Reputation: 351328

You could use Date#toLocaleString with the options available in modern browsers.

Your desired format corresponds to the Canadian locale, which distinguish itself from the US one by adding the dots in "p.m." and putting "PM" in lowercase:

var someDate = new Date();
var str = someDate.toLocaleString('en-CA', { 
    month: "long",
    day: "numeric",
    year: "numeric",
    hour: "numeric", 
    minute: "2-digit"
});

console.log(str);

Upvotes: 1

emcee22
emcee22

Reputation: 1889

You can use a library like Moment.js: https://momentjs.com/

const date = moment('018-05-07T17:51:17.258000-07:00').format('LLL');

Upvotes: 1

Related Questions