How Can Change jquery Datatable date column format dd-mm-yy

Question

In my asp.net core project the data in the datecolumn in jquery datatable looks like below.

I want to see the data in the following format.
16-Mar-2023

If someone could help. I would benefit. thanks in advance

 //HomeController
public JsonResult GetVenderRecord()         
{ var List = _context.tbl_Venders.ToList();              
return Json(List); 
}   

<div >
    <table class="display" id="MyDataTable">
        <thead>
            <tr>
             <th>
            Issue Date
           </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        GetVenderRecord();
    })
    var GetVenderRecord = function () {
        $.ajax({
            type: "Get",
            url: "/Home/GetVenderRecord",
            success: function (response) {
                BindDataTable(response);
            }
        })
    }
    var BindDataTable = function (response) {
 $("#MyDataTable").DataTable({
"aaData": response,
"aoColumns": [
{ "mData": "issueDate" }
 ]
   });}
</script>

Answer 1

Hi @jewel

As Bruce said, you can use "render" property to format your column display, refer to the following code:

            var BindDataTable = function (response) {
                 $("#MyDataTable").DataTable({
                "aaData": response,
                "aoColumns": [
                    { "mData":"name" },
                    { "mData": "issueDate", 
                        "render": function (data) {
                            var date = new Date(data);
                            const monthNames = ["January", "February", "March", "April", "May", "June",
                                "July", "August", "September", "October", "November", "December"
                            ];

                            var month = date.getMonth(); 
                            return date.getDate() + "-" + monthNames[parseInt(month.toString().length > 1 ? month : "0" + month)] + "-" + date.getFullYear();
                        }
                    }
                 ] 
                });
            }

Then the output as below:

Besides, you can also use render property with the moment.js, code as below:

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css"/>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"> </script>
    <script src=""> </script>
    <script type="text/javascript">
            $(document).ready(function () {
                GetVenderRecord();
            })
            var GetVenderRecord = function () {
                $.ajax({
                    type: "Get",
                    url: "/Home/GetVenderRecord",
                    success: function (response) {
                        BindDataTable(response);
                    }
                })
            }
            var BindDataTable = function (response) {
                 $("#MyDataTable").DataTable({
                "aaData": response,
                "aoColumns": [
                    { "mData":"name" },
                    { "mData": "issueDate",
                        "render": DataTable.render.datetime('DD-MMM-YYYY')
                    }
                 ] 
                });
            }
    </script>

Then the output as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Answer 2

Use the column render function to format

https://datatables.net/reference/option/columns.render#function