Javascript 将Json解析日期转换为适合html5输入日期
我正在使用Knockout制作一个漂亮的Gui,就像这样 Javascript:Javascript 将Json解析日期转换为适合html5输入日期,javascript,json,asp.net-mvc,html,knockout.js,Javascript,Json,Asp.net Mvc,Html,Knockout.js,我正在使用Knockout制作一个漂亮的Gui,就像这样 Javascript: viewModel = { lookupCollection: ko.observableArray() }; $(document).ready(function () { $.ajax({ type: "GET", url: "@Url.Action("GetView", "FakturaOmfangs", new {area = "" , id = View
viewModel = {
lookupCollection: ko.observableArray()
};
$(document).ready(function () {
$.ajax({
type: "GET",
url: "@Url.Action("GetView", "FakturaOmfangs", new {area = "" , id = ViewBag.id})",
}).done(function (data) {
$(data).each(function (index, element) {
var mappedItem =
{
FakturaId: ko.observable(element.FakturaId),
FakturaProdukterId: ko.observable(element.FakturaProdukterId),
Beskrivelse: ko.observable(element.Beskrivelse),
Periode: ko.observable(element.Periode),
EndDate: ko.observable(element.EndDate),
procent: ko.observable(element.procent),
Rabat: ko.observable(element.Rabat),
Pris: ko.observable(element.Pris),
Ialt: ko.observable(element.Ialt),
Value: ko.observable(element.Value),
Mode: ko.observable("display")
};
console.log(mappedItem);
viewModel.lookupCollection.push(mappedItem);
});
ko.applyBindings(viewModel);
});
});
EndDate是日期时间吗?像这样从控制器解析
return Json(list, JsonRequestBehavior.AllowGet);
这是我的输入,我想把日期放在其中,这样我就可以编辑它了
<td><input class="form-control" type="date" data-bind="value: EndDate" /></td>
编辑以显示更新的操作:
` public ContentResult GetView(int? id)
{
var list = db.FakturaOmfangs.Where(x => x.FakturaId == id).ToList();
ViewBag.FakturaProdukterId = new SelectList(db.FakturaProdukters, "Id", "Overskrift");
var result = new ContentResult(
Content = JsonConvert.SerializeObject(new { success = list }), Formatting.None, new JsonSerializerSettings()
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
NullValueHandling = NullValueHandling.Include,
DateFormatString = "dd/MM/yyyy"
},
ContentType = "application/json");
return result;
}`
谢谢。
本尼
======================================================================
EndDate: ko.observable(new Date(parseInt(element.EndDate.substr(6))))
//// Or
Updating Model Class:-
[JsonProperty]
[JsonConverter(typeof(IsoDateTimeConverter))]
public DateTime EndDate { get; set; }
//// Or
WebApiConfig.cs File:-
config.Formatters.JsonFormatter.SerializerSettings.Converters.Add(
new IsoDateTimeConverter());
您可以将Json序列化程序设置应用于所需的日期格式,同时从控制器的操作方法返回Json日期,如下所示:
new JsonSerializerSettings()
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
NullValueHandling = NullValueHandling.Include,
DateFormatString = "dd/MM/yyyy"
})
JsonConvert.DeserializeObject<DateTime>(yourDate);
您可以像这样从控制器返回集合[您需要将操作的返回类型更改为ContentResult
:
var result = new ContentResult
{
Content = JsonConvert.SerializeObject(new { success = Collection },
Formatting.None,
new JsonSerializerSettings()
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
NullValueHandling = NullValueHandling.Include,
DateFormatString = "dd/MM/yyyy"
}),
ContentType = "application/json"
};
return result;
您将在“success”对象中获得Json响应,您可以根据需要更改它
然后,在将其绑定到datepicker控件之前,可以通过以下方式对其进行反序列化:
new JsonSerializerSettings()
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
NullValueHandling = NullValueHandling.Include,
DateFormatString = "dd/MM/yyyy"
})
JsonConvert.DeserializeObject<DateTime>(yourDate);
JsonConvert.DeserializeObject(yourDate);
查看此帖子:
这说明了一种方法:
var date = new Date(parseInt(jsonDate.substr(6)));
在您的实例中,在将值分配给视图模型时更改值,或者添加一个计算的可观测值,在检索时将其转换。请发布console.log的输出以及所需的日期格式。@JazzCat我已经编辑了问题并发布了我的输出。嘿,感谢您的快速回答。我已经已尝试的第一个和第二个方法无法使它们中的任何一个正常工作。当解析为查看EndDate时,如下所示:“/Date(149488560000)/”@Benny:我已更新了答案。请尝试ShortDateConverter解决方案,因为type=“Date”仅限mm/dd/yyyy当前区域性日期…我已使用ShortDateConverter进行了尝试,但我对视图的输出仍然是EndDate:“/date(149488560000)/”。是否可以缩短代码(模型类)的屏幕和共享链接?要这样做,我想我必须以不同的方式返回我的对象?然后返回Json?嘿@nikunj Patel,我在尝试“非发票成员'ContentResult'不能像方法一样使用”时遇到了这个错误@Benny,我在返回new关键字时遗漏了它!请检查更新的答案!仍然不起作用,因为ContentResult没有支持3个ArgumentSye的构造函数!@Benny,你是对的!请查看我更新的答案!问题是我的日期是可空的,当我的元素为空时,这会失败。好吧,这不是一个简单的空值吗如果jsonDate!=null,则转换为null,否则将其保留为null??