Formatted dates (client-side) using Jquery in ASP.NET Mvc .NET CORE

Question

hi guys,, I'm try to render date format using jquery dataTables in view for get result date 12/04/2021 but I'm always get data date 12/04/2021 00.00.00. I'm want to 00.00.00 behind date disappearing when data rendering in view.

 

I'm get references link from here https://editor.datatables.net/examples/dates/formatting-client.html.

 

maybe any other idea, I will hear it. any help could be appreciated. 

 

this is the Index.cshtml

@{
    @model System.Data.DataTable
    ViewData["Title"] = "Data Pasien";
    Layout = "~/Views/Shared/AdminLayout.cshtml";
}

<link href="~/plugins/fontawesome-free/css/all.css" rel="stylesheet" />
<link href="~/plugins/sweetalert2/sweetalert2.min.css" rel="stylesheet" />
<script src="~/plugins/sweetalert2/sweetalert2.min.js"></script>
@if (TempData["pesan"] != null)
{
    <script type="text/javascript">
            window.onload = function () {
                swal.fire("Good job!", '@TempData["pesan"]', "success");
            };
    </script>
}
<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div>
            <a asp-action="TambahData"><i class="fa fa-plus-square btn btn-success"> Tambah Data Pasien </i></a>
        </div>
        <hr />
        <table class="table table-bordered table-responsive-lg table-hover" width="100%" id="myTable">
            <thead class="thead-dark text-center">
                <tr>
                    <th>
                        NIK KTP
                    </th>
                    <th>
                        Nama Pasien
                    </th>
                    <th>
                        Alamat
                    </th>
                    <th>
                        Jenis Kelamin
                    </th>
                    <th>
                        Tanggal Lahir
                    </th>
                    <th>
                        Status
                    </th>
                    <th>
                        Action
                    </th>
                </tr>
            </thead>
            <tbody class="text-center">
                @for (int i = 0; i < Model.Rows.Count; i++)
                {
                    <tr>
                        <td>
                            @Model.Rows[i]["Nik"]
                        </td>
                        <td>
                            @Model.Rows[i]["Nama_Pasien"]
                        </td>
                        <td>
                            @Model.Rows[i]["Alamat"]
                        </td>
                        <td>
                            @Model.Rows[i]["Jenis_Kelamin"]
                        </td>
                        <td>
                            @*in this line when render datetime in view I want to get result 12/04/2021*@
                            @Model.Rows[i]["Tanggal_Lahir"]
                        </td>
                        <td>
                            @Model.Rows[i]["Status"]
                        </td>
                        <td>
                            <a asp-action="UpdateData" asp-route-id="@Model.Rows[i]["Id_Pasien"]"><i class="fa fa-edit btn btn-sm btn btn-info"> Edit</i> </a> |
                            <a asp-action="Delete" asp-route-id="@Model.Rows[i]["Id_Pasien"]"><i class="fa fa-trash btn btn-sm btn btn-danger"> Delete</i> </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

    <!-- jQuery -->

    <script src="~/plugins/jquery/jquery-3.5.1.js"></script>
    <link href="~/plugins/datatables/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="~/plugins/datatables/jquery.dataTables.js"></script>
    <script src="~/plugins/moment/moment.min.js"></script>
    <script src="~/plugins/jquery-dateTime/dataTables.dateTime.min.js"></script>

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#myTable").dataTable(
                {
                    bLengthChange: true,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    bFilter: true,
                    bSort: true,
                    bPaginate: true,

                    //For render datetime format to get result 12/04/2021
                    type: 'datetime',
                    def: function () { return new Date(); },
                    displayFormat: 'M/D/YYYY',
                    wireFormat: 'YYYY-MM-DD',
                    fieldInfo: 'US style m/d/y format',
                    keyInput: false,
                    render: $.fn.dataTable.render.moment('D/M/YYYY')
                })
        })
    </script>
</section>