Contents
- Show or hide timestamp
- Setting timestamp format
Having trouble getting help?
Contact Support
Contact Support
Time stamp in EJ2 JavaScript Chat UI control
17 Dec 20246 minutes to read
Show or hide timestamp
You can use the showTimeStamp property to enable or disable timestamps for all messages which displays the exact date and time when they were sent. By default, the value is true
.
ej.base.enableRipple(true);
let currentUserModel = {
id: "user1",
user: "Albert"
};
let michaleUserModel = {
id: "user2",
user: "Michale Suyama"
};
let chatMessages = [
{
author: currentUserModel,
text: "Hi Michale, are we on track for the deadline?",
timeStamp: new Date("December 25, 2024 7:30")
},
{
author: michaleUserModel,
text: "Yes, the design phase is complete.",
timeStamp: new Date("December 25, 2024 8:00")
},
{
author: currentUserModel,
text: "I’ll review it and send feedback by today.",
timeStamp: new Date("December 25, 2024 11:00")
}
];
// Initializes the Chat UI control
let chatUI = new ej.interactivechat.ChatUI({
messages: chatMessages,
user: currentUserModel,
showTimeStamp: false
});
// Render initialized Chat UI.
chatUI.appendTo('#showTimeStamp');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Chat UI</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript Chat UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 380px; width: 450px;">
<div id="showTimeStamp"></div>
</div>
</body>
</html>
Setting timestamp format
You can use the timeStampFormat property to display time formats for all the messages which are displayed with the messages being sent. By default, the value is ` dd/MM/yyyy hh:mm a`.
ej.base.enableRipple(true);
let currentUserModel = {
id: "user1",
user: "Albert"
};
let michaleUserModel = {
id: "user2",
user: "Michale Suyama"
};
let chatMessages = [
{
author: currentUserModel,
text: "Hi Michale, are we on track for the deadline?"
},
{
author: michaleUserModel,
text: "Yes, the design phase is complete."
},
{
author: currentUserModel,
text: "I’ll review it and send feedback by today."
}
];
// Initializes the Chat UI control
let chatUI = new ej.interactivechat.ChatUI({
messages: chatMessages,
user: currentUserModel,
timeStampFormat: 'MMMM hh:mm a'
});
// Render initialized Chat UI.
chatUI.appendTo('#timeStampFormat');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Chat UI</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript Chat UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 380px; width: 450px;">
<div id="timeStampFormat"></div>
</div>
</body>
</html>