How to use node modules (like MomentJS) in EJS views?

Question

To use MomentJS in views/custom.ejs, what is the correct way (if any)?

Server side

routes/index etc we can easily use require('moment'); etc and it works fine.
Server Side (EJS views)

views/custome.ejs, something like <% var m = require('moment'); %> doesn't work

I am using ExpressJS with EJS as the template engine.

score 75 · Answer 1 · answered Aug 29 '13 at 01:20

75

I found another way of doing this, and I think it has some advantages.

Don't polute your code exporting filters.
Access any method without the need to export them all.
Better ejs usage (no | pipes).

On your controller, or view.js do this:

var moment = require('moment');
exports.index = function(req, res) {
    // send moment to your ejs
    res.render('index', { moment: moment });
}

Now you can use moment inside your ejs:

<html>
    <h1><%= moment().fromNow() %></h1>
</html>

I'm not an Node expert, so if anyone see something bad on doing this, let me know! :)

answered Aug 29 '13 at 01:20

robertomarin

1,262
10
8

1

That's the most flexible way IMO – shaharsol Mar 05 '14 at 06:57
1

Works perfect, just need to organize sending all the extra libs to the template. – Jul 06 '14 at 05:20

score 34 · Answer 2 · answered Nov 03 '14 at 06:07

34

One more option:

This way you are setting the moment variable to a local available to all scripts in any EJS page on your site.

In your "index.js" (or "app.js") file do this: (after you have set up your 'app' with Express)

var moment = require('moment');
var shortDateFormat = "ddd @ h:mmA"; // this is just an example of storing a date format once so you can change it in one place and have it propagate
app.locals.moment = moment; // this makes moment available as a variable in every EJS page
app.locals.shortDateFormat = shortDateFormat;

Then in your EJS file you can refer to moment (and shortDateFormat) as variables like this:

<%= moment(Date()).format(shortDateFormat) %>

Perhaps this is slightly more elegant?

answered Nov 03 '14 at 06:07

Matt Manuel

511
1
5
13

5

the cleanest solution! – s2t2 Mar 28 '16 at 20:35
Any specific reason to put it in app.locals instead of using res.locals for passing moment to a particular view only? – Shiv Dec 09 '21 at 19:20
Not that I can recall! I haven't worked on this for a long time. :-) – Matt Manuel Dec 15 '21 at 01:46

score 22 · Answer 3 · edited Sep 28 '22 at 09:41

22

var moment = require('moment');
app.locals.moment = moment;

Use in the view:

<%= moment(myDateValue).fromNow() %>

Now you can simply use moment in your EJS files.

edited Sep 28 '22 at 09:41

Pratik Gohil

48
7

answered Jun 02 '17 at 02:43

Mostafa Darezereshki

395
4
8

score 11 · Answer 4 · answered Oct 09 '12 at 08:05

11

I use moment on the server side with ejs. I wrote an ejs filter function that will return fromNow.

npm install moment

./views/page.ejs

<span class="created_at"><%=: item.created_at | fromNow %></span>

./routes/page.js

var ejs = require('ejs')
  , moment = require('moment');

ejs.filters.fromNow = function(date){
  return moment(date).fromNow()
}

answered Oct 09 '12 at 08:05

chovy

72,281
52
227
295

it could probably be more flexible if you exported moment(date) rather than a function. Might work, I haven't tried | moment.fromNow – chovy Oct 10 '12 at 05:04

score 3 · Answer 5 · answered Apr 02 '13 at 15:53

3

You can create the function and attach it to the app.locals. and use it in the ejs template on the server side.

In your routes file you do

../routes/page.js

var ejs = require('ejs')
  , moment = require('moment');

app.locals.fromNow = function(date){
  return moment(date).fromNow();
}

../views/page.ejs

<span class="created_at"><%= fromNow(item.created_at) %></span>

Just remember to have moment added to to your package.json file

answered Apr 02 '13 at 15:53

user2125268

31
1

I like this better since it will only link the ejs with the function, and not with the modules. – Kat Lim Ruiz Oct 28 '19 at 15:55

score 3 · Answer 6 · answered Jun 19 '17 at 14:07

3

How about passing down require like this:

res.render('index', { require: require });

You might need to tweak to maintain the path:

res.render('index', { require: module => require(module /* here you may insert path correction */) });

Obviously this works with Node (backend) only.

answered Jun 19 '17 at 14:07

haxpanel

4,402
4
43
71

1

This looks like the only real answer to the question. Nice work. Will need to try this out. – Chris Calo Jun 08 '19 at 23:03
1

I was able to get this working in this repo: https://github.com/chriscalo/ejs-require. Really satisfying solution. Not sure why EJS templates don't work this way out of the box. – Chris Calo Jun 13 '19 at 03:40

score 0 · Answer 7 · answered Oct 09 '12 at 07:47

0

The server side (EJS views) which you mentioned above is running on browser and not on your server. You cannot use require because browsers cannot understand it. You need to import the moment.js to use it

<script src="/js/moment.min.js"></script>

answered Oct 09 '12 at 07:47

Vinoth

5,687
11
44
56

1

Thanks @Vinoth I am now looking at rendered code (browser side) and my Layout.ejs includes: `` custom.ejs (view) has code using momentJS lib, example `var a = moment(new Date());` Here `a` is found to be null. – dmodulus Oct 09 '12 at 07:58
Check this link to see how to use it - http://stackoverflow.com/questions/10967736/how-to-use-moment-js – Vinoth Oct 09 '12 at 08:01
2

From my understanding, '<% ... %>' and '<%= ... %>' enclosed code is ran/rendered on the server side, **not** on the client side. Client just gets the rendered (processed) results as plain html, unless you are explicitly using tag, which will run on client side. – dmodulus Oct 09 '12 at 08:14

score 0 · Answer 8 · answered Mar 08 '16 at 12:25

also i think it is good idea if you want you can add a middle-ware where you can add anything you want to the theme layer including user,config and moment:

// config, user, moment to the theme layer
app.use(function (req, res, next) {
    // grab reference of render
    var _render = res.render;
    // override logic
    res.render = function (view, options, fn) {
        // extend config and continue with original render
        options = options || {};
        options.config = config;
        options.moment = moment;
        if (req.user && req.user.toJSON) {
            options.user = req.user.toJSON();
        }
        _render.call(this, view, options, fn);
    }
    next();
});

score 0 · Answer 9 · edited Mar 29 '19 at 15:28

0

I wrote a helpers to return moment for using on ejs view and layouts.

./helpers/utils/get-moment.js

const moment = require('moment');

module.exports = {
    friendlyName: 'formatMoney',
    description: 'format money number.',
    inputs: {},
    sync: true,
    exits: {},
    fn: function (inputs, exits) {
        return exits.success(moment);
    }
};

Then using:

const moment = sails.helpers.utils.getMoment();

edited Mar 29 '19 at 15:28

Logovskii Dmitrii

2,629
4
27
44

answered Jun 05 '18 at 07:27

phuong nguyen

1

1

Please explain your lines of code so other users can understand its functionality. Thanks! – Ignacio Ara Jun 05 '18 at 07:49

score 0 · Answer 10 · answered Aug 26 '20 at 13:00

0

As of Node v12.8.3, it seems that you can pass require directly to EJS templates, i.e. this works:

const ejs = require('ejs')
let renderedHTML = ejs.render(`<% const moment = require('moment') %>`, { require })

answered Aug 26 '20 at 13:00

Donald Sebastian Leung

201
1
5

can you add a little more info? How do I use it in ejs – Jared Christensen Aug 12 '21 at 15:05

How to use node modules (like MomentJS) in EJS views?

10 Answers10

Linked