JavaScript (Display date and time in specific format)

Question

I know how to create date objects in JavaScript, but I am having difficulties displaying the date and time in the following format:

Where does the date and time come from? Where should the output go? — empiric, Jan 19 '17 at 19:09
Consider [*Where can I find documentation on formatting a date in JavaScript*](http://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript). — RobG, Jan 19 '17 at 20:47

score 3 · Answer 1 · answered Jan 19 '17 at 19:09

3

You can consider moment to date formatting. Momentjs is a very good library which provides dateformatting momentjs

check this snippet

console.log(moment().format('LLLLL')); // J

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

answered Jan 19 '17 at 19:09

Geeky

7,420
2
24
50

1

There are many such libraries. If it was suitable to answer this type of questions, then you might give a round up of libraries like fecha.js, date.js, XDate,js, countdown.js, cubism.js, etc. along with built–in support for ECMA-402 and [*toLocaleString*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/format) which does not require any library at all. – RobG Jan 19 '17 at 20:52

Richard Hamilton · Accepted Answer · 2017-01-19T19:41:48.083

One possible Implementation

Start by creating two arrays, that will contain the abbreviated month names and day names respectively.
Create a new date using the Date constructor. In this case, we will pass in the year, month, day of the month, hour, minutes and seconds respectively. There are a few things to keep in mind here. Months start at 0 instead of 1, so to get the third month of the year (March) you would have to pass in 2. Hours range from 0 to 23, so we need to pass in 17 instead of 5.
From this new date object, create variables for the year, month, day, day name, hour minute and seconds respectively.
To get the suffix for the day, we need to use regex with the test function. Depending on the string implementation of the date, we will return a different suffix.
Finally, we can put this altogether with ES6 template strings. Enclose variables and expressions inside ${} and place the string in backticks.

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var days   = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

// Create a new date object and variables based upon this object
var date    = new Date(2012,2,13,17,8,57);
var year    = date.getFullYear();
var month   = months[date.getMonth()];
var day     = date.getDate();
var dayName = days[date.getDay()];
var hour    = date.getHours();
var minute  = date.getMinutes();
var second  = date.getSeconds();

// Control formatting of time
var timePeriod = hour > 12 ? "PM" : "AM";
hour   = hour < 10 ? "0" + hour : hour > 12 ? ((hour % 12) < 10 ? "0" + hour % 12 : hour % 12) : hour;
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
                                               
// Return the suffix of the day
day = /[4567890]$|11|12|13/.test(day) ? day + "th" :
      /^1$|21|31/.test(day) ? day + "st" : 
      /^2$|22/.test(day) ? day + "nd" : day + "rd";

// Log the results
console.log(`${dayName} ${month} ${day}, ${year}, ${hour}:${minute}:${second} ${timePeriod}`);

JavaScript (Display date and time in specific format)

2 Answers2