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
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...)