Datetime formatting / customization in ejs

Question

I show date by this in ejs

<%= new Date();%>

it give me result

Tue Feb 02 2016 16:02:24 GMT+0530 (IST)

But I need to show as

19th January, 2016

How can I do this in ejs?

Note: The way you display a date differs from user to user and country to country. See my answer below for more information. — sffc, Feb 05 '21 at 22:07

gmuraleekrishna · Answer 1 · 2022-01-28T07:47:15.877

You can use moment

In your controller,

var moment = require('moment');
exports.index = function(req, res) {
    res.render('index', { moment: moment });
}

In your html,

<html>
    <h1><%= moment().format('Do MMMM, YYYY'); %></h1>
</html>

EDIT :

Using basic JS

const suffixMap = {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th',
};

const date = new Date();
const dateDay = date.getDate();
const dateMonth = date.toLocaleString('default', {month: 'long'});
const dateYear = date.getFullYear();
const pluralRule = new Intl.PluralRules('en-GB', {type: 'ordinal'});
const dateOrdinal = suffixMap[pluralRule.select(dateDay)]

const ordinalDateString = `${dateDay}${dateOrdinal} ${dateMonth}, ${dateYear}`; 
// Expected output: 25th August, 2020

(Adapted from this answer)

const date = new Date();
const dateDay = date.getDate();
const dateMonth = date.toLocaleString('default', {month: 'long'});
const dateYear = date.getFullYear();

// DETERMINE DATE ORDINAL
let dateOrdinal = 'th';

dateOrdinal = ([1, 21, 31].indexOf(dateDay) > -1) ? 'st' : dateOrdinal;
dateOrdinal = ([2, 22].indexOf(dateDay) > -1) ? 'nd' : dateOrdinal;
dateOrdinal = ([3, 23].indexOf(dateDay) > -1) ? 'rd' : dateOrdinal;

// FORMAT DATE AS STRING
const ordinalDateString = `${dateDay}${dateOrdinal} ${dateMonth}, ${dateYear}`; 
// Expected output: 25th August, 2020

Or, if you can live without ordinal day (th, nd, rd etc) you could use basic JS

<%= new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long', day: '2-digit'}).format(new Date()) %>
// Expected output: 25 August 2020

score 17 · Answer 2 · answered Aug 22 '18 at 12:40

17

You don't need moment js, you can simply use this

<%= new Date().getFullYear();%>

answered Aug 22 '18 at 12:40

mojoblanco

683
1
7
17

Rock K · Answer 3 · 2018-03-15T20:58:29.563

10

Post is old but in case anyone runs into the issue.

You can eliminate installing moment and write one little line of code. adding .toDateString() will provide you with the above format in ejs.

however, Moment is used for more detailed date, such as Day, or month or year etc...

edited Mar 15 '18 at 20:58

answered Mar 15 '18 at 20:42

Rock K

97
1
7

Fathma Siddique · Answer 4 · 2020-04-29T14:30:33.370

For a better code management, you can add the code(below) in app.js/server.js. This will save moment in the res.locals.moment at the time of starting the app. By doing this you can access the moment variable from any ejs page. app.js/server.js:

const express = require("express");
const app = express();
const moment = require("moment");

app.use((req, res, next)=>{
    res.locals.moment = moment;
    next();
  });

something.ejs

<p><%= moment(yourDateVariable).format('Do MMMM, YYYY')  %></p>

Here Do will result with 19th.You can check it here https://momentjs.com/docs/#/displaying/format/. Hope this will help.

score 1 · Answer 5 · edited May 19 '17 at 03:22

1

You can do this:

<%= moment(user.date).format( 'MMM-DD-YYYY') %>

edited May 19 '17 at 03:22

Pang

9,564
146
81
122

answered May 19 '17 at 02:49

Kiran Raj R

150
7

If you add moment as a js script you can't because moment is not defined when the page is rendering. You have to pass moment to the .ejs file like the most upvoted answer. – Samuel Méndez Jul 18 '18 at 08:07

score 1 · Answer 6 · answered Feb 05 '21 at 22:06

The problem with most of the answers on this page is that they will format the date using the server's locale, but you probably want them rendered in the user's locale. For example, if your server is in Virginia, your dates will be displayed in English in Eastern Time, but a user in another country will probably want them displayed differently.

The following code snippet will render date using the user's locale. There's room for improvement, but it's a starting point:

<p>
<script type="text/javascript">
document.write(
  new Date("<%= date.toISOString() %>").toLocaleDateString()
);
</script>
</p>

This takes the date on the server, converts it to an ISO-8601 string, and interpolates it into a little JavaScript snippet that runs client-side to produce the correct localized output.

For more information on toLocaleString, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

If you're going to do this, you should probably avoid `document.write` and [use `.innerText` instead](https://stackoverflow.com/a/73511088/2065702) — Zach Saucier, Aug 27 '22 at 12:39

Titan XP · Answer 7 · 2022-07-21T16:20:50.153

// I have tested this in a for loop, it seems to be ok.

<% let d = new Date(); %>
<% let day = d.getDate(); %>
<% let m = ["January", "February", "March", "April", "May", "June", "July", 
"August", "September", "October", "November", "December"]; %>
<% let month = m[d.getMonth()]; %>
<% let year = d.getFullYear(); %>
<% let newdate = day + "th " + month + ", " + year; %>
<%= newdate %> // 22th July, 2022

// You can use the if...else statement for the ordinal number

score 0 · Answer 8 · answered Aug 12 '23 at 18:46

0

 <h1>
  <%= new Date().getDate() %> <%= new Date().toLocaleString('default', {month: 'long'});  %>,<%= new Date().getFullYear();  %>
</h1>

answered Aug 12 '23 at 18:46

Legititan

1
1

This gives the output like "13 August,2023".Nothing new just after refering all the above answers this is the simplified answer – Legititan Aug 12 '23 at 18:48

Datetime formatting / customization in ejs

8 Answers8

EDIT :

Linked