How to use node modules (like MomentJS) in EJS views?
Last Updated :
02 Apr, 2024
In Node.js applications using EJS views, using external modules such as MomentJS allows us to manipulate and format the dates and times that are rendered in HTML. We can create a dynamic and real-time presentation of time data in a user-friendly manner using MomentJS in EJS Views. In this article, we will explore the use of node modules (like MomentJS) in EJS views.
Prerequisites
What is MomentJS?
MomentJS is the open-source JS library used for parsing, validating, manipulating, and formatting dates and times in the application. We can calculate the differences between dates, adjust the time zones, and perform more operations of dates and times using this library. Using this library, we can easily handle complex date and time operations efficiently.
Steps to use node modules (like MomentJS) in EJS views
Step 1: In the first step, we will create the new folder as a moment-ejs by using the below command in the VScode terminal.
mkdir moment-ejs
cd moment-ejs
Step 2: After creating the folder, initialize the NPM using the below command. Using this the package.json file will be created.
npm init -y
Step 3: Now, we will install all the required dependencies modules for our project using the below command.
npm i express ejs moment
Step 4: Now create the below Project Structure of our project which includes the file as app.js and views/index.js.
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.18.2",
"moment": "^2.30.1"
}Step 5: Write the below-specified code in app.js.
Javascript
const express = require('express');
const ejs = require('ejs');
const moment = require('moment');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
app.use(express.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.render('index');
});
app.post('/formatDate', (req, res) => {
const userInputDate = req.body.userInputDate;
const formattedDate = moment(userInputDate).
format('MMMM Do YYYY, h:mm:ss a');
res.render('index', { formattedDate });
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
Step 6: Write the below code in views/index.ejs file.
HTML
<!DOCTYPE html>
<head>
<title>MomentJS EJS</title>
</head>
<body>
<h1>MomentJS EJS Example</h1>
<form method="post" action="/formatDate">
<label for="userInputDate">Enter a date:</label>
<input type="text" id="userInputDate" name="userInputDate" required>
<button type="submit">Format Date</button>
</form>
<% if (formattedDate) { %>
<p>Formatted Date: <%= formattedDate %></p>
<% } %>
</body>
</html>
Start the server by using the below command.
node app.js
Output:
Explanation:
- In the above example, we have used the MomentJS Node module in the EJS Views within the Express.js app.
- Here, the web page allows us to input the date, and then the for is submitted, the server uses MomentJS to format the date and dynamically render the formatted result in the EJS view.
Share your thoughts in the comments
Please Login to comment...