New to Kendo UI for jQuery? Start a free 30-day trial

TimestampTemplate

configuration

The template used to render timestamp elements that separate message groups by date. When set to null, the default timestamp logic is used which displays relative dates like "Today", "Yesterday", "Last Wednesday", or absolute dates for older messages.

The template function receives an object with date (parsed Date object) and message (current message object) properties and should return the complete HTML structure for the timestamp element.

Returning null or an empty string will hide the time breaks from the chat.

timestampTemplate

Function

Default: null

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Good morning! How are you today?",
        authorId: "user1",
        authorName: "John Doe",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0)
    },
    {
        id: 2,
        text: "I'm doing well, thanks for asking!",
        authorId: "user2",
        authorName: "Jane Smith",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 2, 10, 30)
    },
    {
        id: 3,
        text: "Did you see the news today?",
        authorId: "user1",
        authorName: "John Doe",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 5, 14, 15)
    }
];

$("#chat").kendoChat({
    timestampTemplate: function(data) {
        const date = data.date;
        const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

        return "<div class='custom-timestamp'>" +
            "<span class='timestamp-text'>" +
            dayNames[date.getDay()] + ", " +
            monthNames[date.getMonth()] + " " +
            date.getDate() +
            "</span>" +
            "</div>";
    },
    authorId: "user2",
    dataSource: messagesData
});
</script>