Rendering DateTime to dd/mm/yyyy format in DataTable

Question

I'm trying to figure out how to render a DateTime value to short string or in the format of dd/mm/yyyy. I tried DateCreated.Value.ToShortDateString() and DateCreated.ToShortDateString(), but it doesn't seemed defined for a DataTable

My current output looks like 2017-04-23T17:39:20.687

How can I render it like dd/mm/yyyy in a DataTable?

@model IEnumerable<TestApp.Models.Announcement>
@{
    ViewBag.Title = "Announcement List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>AnnouncementList</h2>

@Html.ActionLink("New Announcement", "New", "Annoucement", null, new {@class = "btn btn-primary"})


<table id="announcement" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Date Created</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
@section scripts
{
    <script>
        $(document).ready(function() {
            var table = $("#announcement").DataTable({
                ajax: {
                    url: "/api/announcements",
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "title",
                        render: function(data, type, announcement) {
                            return announcement.title;
                        }
                    },
                    {
                        data: "description",
                        render: function(data, type, announcement) {
                            return announcement.description;
                        }
                    },
                    {
                        data: "dateCreated",
                        render: function(data, type, announcement) {
                            return announcement.dateCreated;
                        }
                    },
                    {
                        data: "id",
                        render: function(data) {
                            return "<button class='btn-link js-delete' data-announcement-id=" +
                                data +
                                ">Delete</button>";
                        }
                    }
                ]
            });


            $("#announcement").on("click",
                ".js-delete",
                function() {
                    var button = $(this);

                    bootbox.confirm("Are you sure you want to delete this annoucement?",
                        function(result) {
                            if (result) {
                                $.ajax({
                                    url: "/api/announcement/" + button.attr("data-annoucement-id"),
                                    method: "DELETE",
                                    success: function() {
                                        table.row(button.parents("tr")).remove().draw();
                                    }
                                });
                            }
                        });
                });
        });
    </script>


}

Model

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace TestApp.Models
{
    public class Announcement
    {
        public int Id { get; set; }

        [DataType(DataType.MultilineText)]
        public string Title { get; set; }


[DataType(DataType.MultilineText)]
        public string Description { get; set; }

        public DateTime DateCreated { get; set; }
     //   public bool? SendEmail { get; set; }

    }
}

CodingYoshi's posted answer

 <script>
        $(document).ready(function() {
            var table = $("#announcement").DataTable({
                ajax: {
                    url: "/api/announcements",
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "title",
                        render: function(data, type, announcement) {
                            return announcement.title;
                        }
                    },
                    {
                        data: "description",
                        render: function(data, type, announcement) {
                            return announcement.description;
                        }
                    },
                    {
            data: "dateCreated", //also tried putting data: dateCreatedFormatted here too:
                        render: function (data, type, announcement) {
                            return announcement.dateCreatedFormatted;
                        }
                    },
                    {
                        data: "id",
                        render: function(data) {
                            return "<button class='btn-link js-delete' data-announcement-id=" +
                                data +
                                ">Delete</button>";
                        }
                    }
                ]
            });


            $("#announcement").on("click",
                ".js-delete",
                function() {
                    var button = $(this);

                    bootbox.confirm("Are you sure you want to delete this annoucement?",
                        function(result) {
                            if (result) {
                                $.ajax({
                                    url: "/api/announcement/" + button.attr("data-annoucement-id"),
                                    method: "DELETE",
                                    success: function() {
                                        table.row(button.parents("tr")).remove().draw();
                                    }
                                });
                            }
                        });
                });
        });
    </script>

earloc's posted answer

 <script>
        $(document).ready(function() {
            var table = $("#announcement").DataTable({
                ajax: {
                    url: "/api/announcements",
                    dataSrc: ""
                },
                columns: [
                    {
                        data: "title",
                        render: function(data, type, announcement) {
                            return announcement.title;
                        }
                    },
                    {
                        data: "description",
                        render: function(data, type, announcement) {
                            return announcement.description;
                        }
                    },
                    {
                        data: "dateCreated",
                        render: function (data, type, announcement) {
                            return announcement.FormattedDate;
                        }
                    },
                    {
                        data: "id",
                        render: function(data) {
                            return "<button class='btn-link js-delete' data-announcement-id=" +
                                data +
                                ">Delete</button>";
                        }
                    }
                ]
            });


            $("#announcement").on("click",
                ".js-delete",
                function() {
                    var button = $(this);

                    bootbox.confirm("Are you sure you want to delete this annoucement?",
                        function(result) {
                            if (result) {
                                $.ajax({
                                    url: "/api/announcement/" + button.attr("data-annoucement-id"),
                                    method: "DELETE",
                                    success: function() {
                                        table.row(button.parents("tr")).remove().draw();
                                    }
                                });
                            }
                        });
                });
        });
    </script>

and I put this

 public string FormattedDate => DateCreated.ToShortDateString();


 public DateTime DateCreated { get; set; }

in model

You could format the date in the client-side code that renders the DataTable — Maria Ines Parnisari, Apr 23 '17 at 22:15

score 3 · Accepted Answer · edited May 23 '17 at 12:25

3

I think you´re mixing technologies here!

Either, provide a formatted string-representation in your Model like (C# 6 Syntax):

public string FormattedDate => DateCreated.ToShortDateString()

and pull this property in JavaScript via:

columns: [
                {
                    data: "dateCreated",
                    render: function(data, type, announcement) {
                        return announcement.FormattedDate;
                    }
                },

or, as Maria suggested, format the date directly on the client-side using techniques like explained here or with help of e.g.: moment.js

(Tha Client-Side JavaScript does not know anything about "ToShortDateString"-Method on a date...)

edited May 23 '17 at 12:25

Community

1
1

answered Apr 23 '17 at 22:26

earloc

2,070
12
20

For this I'm getting the error: DataTables warning: table id=announcement - Requested unknown parameter 'dateCreated' for row 0, column 2. For more information about this error, please see http://datatables.net/tn/4 See code above for reference. – Andy Apr 23 '17 at 23:20
As both answers Are kind of correct, i would appreciate an upvote . – earloc Apr 24 '17 at 06:05

CodingYoshi · Answer 2 · 2017-04-23T22:36:19.300

3

Add this property to your model:

public string DateCreatedFormatted { get { return this.DateCreated.ToString("dd/MM/yyyy"); } }

Then bind to this property in your JavaScript code.

edited Apr 23 '17 at 22:36

answered Apr 23 '17 at 22:30

CodingYoshi

25,467
4
62
64

1

It should be "dd/MM/yyyy". Lowercase mm means minutes, not months. – Alejandro Apr 23 '17 at 22:35
I tried this and put it in to the table, but got the following error. See added code above for reference DataTables warning: table id=announcement - Requested unknown parameter 'dateCreatedFormatted' for row 0, column 2. For more information about this error, please see http://datatables.net/tn/4 – Andy Apr 23 '17 at 23:14
@andy javascript is case sensitive so you must use `DateCreatedFormatted` – CodingYoshi Apr 23 '17 at 23:25
I wrote it in camel case because I added code that formats everything in camelcase and thought that's how I would need to add it in webapiconfig.cs *var settings = config.Formatters.JsonFormatter.SerializerSettings; settings.ContractResolver = new CamelCasePropertyNamesContractResolver(); settings.Formatting = Formatting.Indented;* – Andy Apr 23 '17 at 23:41
I figured out the issue. I was using Dto model and didn't put the formatted public string line in there so it didn't see it. Thanks for the help – Andy Apr 23 '17 at 23:43

score 0 · Answer 3 · answered Apr 04 '22 at 05:36

I know that this post it is a old. I am show my solution working on asp.net Core 3.1 environment. My objective was to display a datetime value obtained from a database column with a datetime2(2) datatype, in a more clear format like dd-mm-yy HH:mm.

Required scripts:

 <script src="~/js/datagrid/datatables/datatables.bundle.js"></script>
 <script src="~/js/dependency/moment/moment.js"></script>

Solution shortcut:

   columns: [
            { title: "Username", data: "username" },
            {
                title: "Registration Date",
                data: "enrollmentTimeStamp",
                render: function (data, type, full, meta) {
                    return moment(data).format('DD-MM-YYYY HH:mm');
                }
            },
        ],

Good luck!

Rendering DateTime to dd/mm/yyyy format in DataTable

3 Answers3