'How to format date in DataTable

This is my first time formatting dates through JavaScript. I am trying to format the date to MM/DD/YYY from YYYY-MM-DD HH:MM:SS. I have seen where others are including the date time js and moment js

<script src="//cdn.datatables.net/plug-ins/1.11.5/dataRender/datetime.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

I have placed them in the layout.cshtml page and I have tried the render code I have seen but each example I have found is not exactly what I am doing. Can someone help me with what I am doing wrong?

The data being passed in to the render is

{
  "data":[
    {
      "id":25582,
      "coursE_ID":444,
      "course":{
        "id":444,
        "coursE_TITLE":"Agency Startup",
        "comments":null,
        "description":"This course provides an overview of the procedures performed to prepare the system for the start-up process. The PDF is also covered in this class.",
        "duration":"2.5 hours",
        "shorT_DESC":null,
        "creatE_USER_ID":"1248",
        "creatE_DATE":"2008-03-26T11:46:39",
        "moD_USER_ID":"1246",
        "moD_DATE":"2009-12-16T13:50:10",
        "inactivE_DATE":"2010-01-07T00:00:00"
      },
      "clasS_ID":387,
      "classes":{
        "id":387,
        "locatioN_ID":103,
        "courseS_ID":443,
        "datE_START":"2008-05-15T00:00:00",
        "datE_END":"2008-05-15T00:00:00",
        "seats":"12",
        "creatE_USER_ID":"2",
        "creatE_DATE":"2008-04-18T11:38:59",
        "moD_USER_ID":"1248",
        "moD_DATE":"2008-05-19T14:01:36",
        "inactivE_DATE":"2008-05-19T14:01:36",
        "comments":"The 1 person registered decided to transfer to another class.",
        "timestartend":"9:00 AM - 4:30 PM",
        "clasS_TYPE":null,
        "instructoR_ID":null
      },
      "useR_ID":11345,
      "tA_User":{
        "id":11345,
        "fname":"Bo",
        "lname":"Dis",
        "mi":null,
        "seC_ID":1,
        "phone":null,
        "fax":null,
        "email":"[email protected]",
        "useR_NAME":"BD",
        "useR_PW":"bd",
        "position":null,
        "insT_FLG":1,
        "creatE_USER_ID":"707",
        "creatE_DATE":"2021-08-25T10:30:27",
        "moD_DATE":null,
        "suP_USER_ID":null,
        "comments":null,
        "admiN_COMMENTS":null,
        "inactivE_DATE":null,
        "agencY_ID":5,
        "lasT_LOGIN":null,
        "emaiL_SUBSCR":1
      },
      "admiN_COMMENTS":"Testing Registration Insert",
      "registeR_DATE":"2022-04-07T00:00:00",
      "waiT_DATE":"2022-04-06T00:00:00",
      "creatE_USER_ID":11345,
      "creatE_DATE":"2022-04-06T00:00:00",
      "moD_USER_ID":11345,
      "moD_DATE":"2022-04-06T00:00:00",
      "attended":"1",
      "agencY_ID":2,
      "agency":{
        "id":2,
        "description":"OPB",
        "inactivE_DATE":null
      }
    }
  ]
}

function loadDataTable() {
datatable = $('#tblData').DataTable({
    "ajax": {
        "url": "/Customer/Registration/GetAll"
    },
    "columns": [
        { "data": "course.coursE_TITLE", "width": "25%" },
        { "data": "clasS_ID", "width": "15%" },
        { "data": "tA_User.fname", "width": "10%" },
        { "data": "tA_User.lname", "width": "10%" },
        { "data": "admiN_COMMENTS", "width": "15%" },
        {
            "data": "registeR_DATE",
            "render": $.fn.datatable.render.moment('MM/DD/YYYY'),
            "width": "15%"
        },

The errors I am receiving are the following. If I put the $.fn line in double qoutes I get this.

DataTables warning: table id=tblData - Requested unknown parameter 'registeR_DATE' for row 0, column 5. For more information about this error, please see http://datatables.net/tn/4

If I leave the $.fn line without qoutes I get this.

jquery.min.js:2

   jQuery.Deferred exception: Cannot read properties of undefined (reading 'render') TypeError: Cannot read properties of undefined (reading 'render')
at loadDataTable (https://localhost:7034/js/registration.js:17:65)
at HTMLDocument.<anonymous> (https://localhost:7034/js/registration.js:4:5)
at e (https://localhost:7034/lib/jquery/dist/jquery.min.js:2:30005)
at t (https://localhost:7034/lib/jquery/dist/jquery.min.js:2:30307) undefined

javascript

Solution 1:^[1]

I needed to move forward so I found a less graceful work around. Below code gives me the desired result.

   { "data": "moD_USER_ID", "width": "15%" },
        {
            "data": "moD_DATE",
            "render": function (data) {
                if (data == null) return "";
                var date = new Date(data);
                var month = date.getMonth() + 1;
                return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
            }
            ,"width": "15%"
        },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	user1243474

'How to format date in DataTable

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]