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

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";
}
"~/plugins/fontawesome-free/css/all.css" rel="stylesheet" />
"~/plugins/sweetalert2/sweetalert2.min.css" rel="stylesheet" />
"~/plugins/sweetalert2/sweetalert2.min.js">
@if (TempData["pesan"] != null)
{
"text/javascript">
window.onload = function () {
swal.fire("Good job!", '@TempData["pesan"]', "success");
};
}
class="content">
class="container-fluid">
"TambahData">class="fa fa-plus-square btn btn-success"> Tambah Data Pasien

class="table table-bordered table-responsive-lg table-hover" width="100%" id="myTable">

class="thead-dark text-center">

NIK KTP

Nama Pasien

Alamat

Jenis Kelamin

Tanggal Lahir

Status

Action

class="text-center">

@for (int i = 0; i < Model.Rows.Count; i++)

{

@Model.Rows[i]["Nik"]

@Model.Rows[i]["Nama_Pasien"]

@Model.Rows[i]["Alamat"]

@Model.Rows[i]["Jenis_Kelamin"]

@*in this line when render datetime in view I want to get result 12/04/2021*@

@Model.Rows[i]["Tanggal_Lahir"]

@Model.Rows[i]["Status"]

"UpdateData"

asp-route-id="@Model.Rows[i]["Id_Pasien"]">class="fa fa-edit btn btn-sm btn btn-info"> Edit |

"Delete"

asp-route-id="@Model.Rows[i]["Id_Pasien"]">class="fa fa-trash btn btn-sm btn btn-danger"> Delete

}

"~/plugins/jquery/jquery-3.5.1.js">

"~/plugins/datatables/jquery.dataTables.min.css" rel="stylesheet" />

"~/plugins/datatables/jquery.dataTables.js">

"~/plugins/moment/moment.min.js">

"~/plugins/jquery-dateTime/dataTables.dateTime.min.js">

"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')

})

problem solved

I was get the solution.

@{
@model System.Data.DataTable
ViewData["Title"] = "Data Pasien";
Layout = "~/Views/Shared/AdminLayout.cshtml";
}
"~/plugins/fontawesome-free/css/all.css" rel="stylesheet" />
"~/plugins/sweetalert2/sweetalert2.min.css" rel="stylesheet" />
"~/plugins/sweetalert2/sweetalert2.min.js">
"~/plugins/jquery/jquery-3.5.1.js">
"~/plugins/datatables/jquery.dataTables.min.css" rel="stylesheet" />
"~/plugins/datatables/jquery.dataTables.js">
"~/plugins/moment/moment.min.js">
"~/plugins/jquery-dateTime/dataTables.dateTime.min.js">
"text/javascript" language="javascript">
$.fn.dataTable.render.moment = function (from, to, locale) {
// Argument shifting
if (arguments.length === 1) {
locale = 'en';
to = from;
from = 'DD-MM-YYYY';
}
else if (arguments.length === 2) {
locale = 'en';
}
return function (d, type, row) {
if (!d) {
return type === 'sort' || type === 'type' ? 0 : d;
}
var m = window.moment(d, from, locale, false);
return m.format(type === 'sort' || type === 'type' ? 'x' : to);
};
};
$(document).ready(function () {
$("#myTable").dataTable(
{
bLengthChange: true,
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
bFilter: true,
bSort: true,
bPaginate: true,
columns: [
{ data: 'Id_Pasien' },
{ data: 'Nik' },
{ data: 'Nama_Pasien' },
{ data: 'Alamat' },
{ data: 'Jenis_Kelamin' },
{ data: 'Tanggal_Lahir', render: $.fn.dataTable.render.moment('DD/MM/YYYY') },
{ data: 'Status' }
]
})
})
@if (TempData["pesan"] != null)
{
"text/javascript">
window.onload = function () {
swal.fire("Good job!", '@TempData["pesan"]', "success");
};
}
class="content">
class="container-fluid">
"TambahData">class="fa fa-plus-square btn btn-success"> Tambah Data Pasien

@Asma Khalid

I'm has been try it and the result still same, I'm get result 12/04/2021 00.00.00 when the view rendered.

problem not yet solved.

Do it like this i.e.

"text/javascript" language="javascript">
$(document).ready(function ()
{
$("#myTable").dataTable(
{
columnDefs:
[{
targets: 4,
render: $.fn.dataTable.render.moment( 'D/M/YYYY' )
}],
bLengthChange: true,
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
bFilter: true,
bSort: true,
bPaginate: true,
});
}) ;

Where 'targets: 4' is the index of your date colu,n starting from 0.

Mark answer as accepted if helpful

Thanks & Regards,

Asma Khalid

For More Visit: www.asmak9.com or www.bytezaar.com