Datetime formatting / customization in EJS Template Engine

Last Updated : 22 Mar, 2024

EJS stands for Embedded JavaScript. It is a template engine designed to be used with server-side JavaScript environments like NodeJS and to generate dynamic content on a web page. Datetime formatting in EJS involves manipulating date and time objects to present them in a desired format within your web application. In this article, we will learn about How to do DateTimeits Formatting in EJS with different different Approaches with it's syntax and example.

We will go through different approaches to Format Datetime in EJS. refer to the example section for examples of all approaches.

Using JavaScript Date Methods:

In this approach, we can directly use JavaScript's built-in Date object and its methods to format datetime values.

Syntax:

<% let date = new Date() %>
<%= date.toDateString() %>
<%= date.getDate() %>
<%= date.getMonth()+1 %>
<%= date.getFullYear() %>

Using Moment.js Library:

In this approach, we are using Moment.js library. It is used to do datetime manipulation and formatting in JavaScript. You can include it in your Node.js project and use it's features for datetime operations.

To use Moment.js, You have to install it by using this command:

npm install moment

Syntax:

const FormattedDate1 = moment().format('MMMM Do YYYY, h:mm:ss a');
const FormattedDate2 = moment().format('dddd');

Steps to Create Node App & Install Required Modules:

Step 1: Create a NodeJS application using the following command:

npm init

Step 2: Install required Dependencies:

 npm i ejs express moment

The updated dependencies in package.json file will look like:

"dependencies": {
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "moment": "^2.30.1"
}

Example: The Below example is demonstrating the Datetime formatting in EJS.

HTML

<!--File path: views/index.ejs -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>EJS Datetime Formatting</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksForGeeks | Datetime formatting in EJS</h1>

    <h3>Approach 1: Using JavaScript Date Methods</h3>
    <% let date=new Date() %>

        <p><b>whole Date & Time:</b>
            <%= date %>
        </p>

        <p>
            <b>toDateString() method:</b>
            <%= date.toDateString() %>
        </p>

        <p>
            <b>toLocaleDateString() method:</b>
            <%= date.toLocaleDateString() %>
        </p>

        <p>
            <b>getDate(), getMonth(), getFullYear() methods:</b>
            <%= date.getDate() %>/<%= date.getMonth()+1 %>/<%= date.getFullYear() %>
        </p>

        <p>
            <b>getHours(), getMinutes(), getSeconds() methods:</b>
            <%= date.getHours() %>:<%= date.getMinutes() %>:<%= date.getSeconds() %>
        </p>

        <h3>Approach 2: Using Moment.js Library</h3>
        <p>
            <b>Formatted Date 1:</b>
            <%= FormattedDate1 %>
        </p>
        <p>
            <b>Formatted Date 2:</b>
            <%= FormattedDate2 %>
        </p>
        <p>
            <b>Formatted Date 3:</b>
            <%= FormattedDate3 %>
        </p>
        <p>
            <b>Formatted Date 4:</b>
            <%= FormattedDate4 %>
        </p>
</body>

</html>

JavaScript

//File path: /index.js (root)
// Import required modules
const express = require('express');
const path = require('path');
const moment = require('moment');

// Create an Express application
const app = express();

// Define the port for the server to listen on
const port = 3000;

// Set EJS as the view engine
app.set('view engine', 'ejs');

// Set the views directory to 'views' in the current directory
app.set('views', path.join(__dirname, 'views'));

// Define a route to render the EJS template when the root path is accessed
app.get('/', (req, res) => {

    // Formatting Datetime using Moment.js
    const FormattedDate1 =
        moment().format('MMMM Do YYYY, h:mm:ss a');
    const FormattedDate2 =
        moment().format('dddd');
    const FormattedDate3 =
        moment().format("MMM Do YY");
    const FormattedDate4 =
        moment().calendar();

    // Render the EJS template named 'index' and pass the data
    res.render('index',
        {
            FormattedDate1,
            FormattedDate2,
            FormattedDate3,
            FormattedDate4
        });
});

// Start the server and listen on the specified port
app.listen(port, () => {
    // Display a message when the server starts successfully
    console.log(`Server is running at http://localhost:${port}`);
});