我想弄清楚如何将 DateTime 值呈现为短字符串或 dd/mm/yyyy 格式。我尝试了 DateCreated.Value.ToShortDateString() 和 DateCreated.ToShortDateString()，但它似乎没有为 DataTable 定义
我当前的输出看起来像 2017-04-23T17:39:20.687
如何在 DataTable 中像 dd/mm/yyyy 一样渲染它？
@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>
}
模型
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 发布的答案
<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 发布的答案
<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>
我把这个
public string FormattedDate => DateCreated.ToShortDateString();
public DateTime DateCreated { get; set; }
在模型中
最佳答案
我认为你在这里混合了技术!
或者，在您的模型中提供格式化的字符串表示，如(C# 6 语法):
public string FormattedDate => DateCreated.ToShortDateString()
并通过以下方式在 JavaScript 中提取此属性:
columns: [
{
data: "dateCreated",
render: function(data, type, announcement) {
return announcement.FormattedDate;
}
},
或者，正如 Maria 所建议的，使用解释的 here 之类的技术或在例如 moment.js 的帮助下直接在客户端格式化日期
(Tha 客户端 JavaScript 对日期上的“ToShortDateString”-Method 一无所知......)
关于c# - 在 DataTable 中将 DateTime 渲染为 dd/mm/yyyy 格式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43577061/