Html Knockout.js 格式日期项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17148572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout.js format date item
提问by Martin
In my view I wish to display a knockout.jsbinded field that contains a date. It is just a display field and not an input field. Something like below when basemodel.actionDate = ko.observable()
在我看来，我希望显示一个knockout.js包含日期的绑定字段。它只是一个显示字段，而不是一个输入字段。像下面这样的时候basemodel.actionDate = ko.observable()
<p class="display-field" data-bind="text: baseModel.actionDate"/>
However this is displayed as follows:
但是显示如下：
2013-06-17T11:56:18.4537687Z
What is the easiest way to format this dd mm yyyy. eg: 17 June 2013?
什么是格式化最简单的方法dd mm yyyy。例如：17 June 2013？
回答by Brandon
回答by Anders
Either make sure the service output it in a correct format, or format in client side
确保服务以正确的格式输出它，或者在客户端格式化
If you want todo it client side then you can parse the ISO date string into a Date object and then use jQuery globalize to format it to desired format.
如果您想在客户端执行此操作，则可以将 ISO 日期字符串解析为 Date 对象，然后使用 jQuery globalize 将其格式化为所需格式。
I use KO extenders for this
我为此使用 KO 扩展器
ko.extenders.date = function(target, format) {
return ko.computed({
read: function() {
var value = target();
if(typeof value === "string") {
value = new Date(value);
}
format = typeof format === "string" ? format: undefined;
value = Globalize.format(value, format);
return value;
},
write: target
});
}
update
更新
I got a question on my blog how to retrieve the raw date value It can be done my exposing the raw value on the computed like
我在我的博客上有一个问题如何检索原始日期值它可以完成我在计算上公开原始值，例如
回答by Vladislav
Declare format function:
声明格式函数：
Date.prototype.toFormattedDate = function () {
var dd = this.getDate();
if (dd < 10) dd = '0' + dd;
var mm = this.getMonth() + 1;
if (mm < 10) mm = '0' + mm;
var yyyy = this.getFullYear();
/* change format here */
return String(mm + "/" + dd + "/" + yyyy);
};
And use it with the date strings as:
并将其与日期字符串一起使用：
<span data-bind="text: new Date(TaxAuthority.RegDate).toFormattedDate()"></span>
回答by Simon_Weaver
I had some issues (I think) with the mapping plugin trying to use the extender. Since I'm only displaying dates and not allowing them to be edited I prefer to just use a binding handler like this:
我在尝试使用扩展器的映射插件时遇到了一些问题（我认为）。因为我只显示日期并且不允许编辑它们，所以我更喜欢只使用这样的绑定处理程序：
Shipped on <span data-bind="date: shipDt"></span>
Here's the handler:
这是处理程序：
ko.bindingHandlers.date =
{
update: function (element, valueAccessor: () => any, allBindingsAccessor: any)
{
return ko.bindingHandlers.text.update(element, function ()
{
var value: any = ko.utils.unwrapObservable(valueAccessor());
if (value == null)
{
return null;
}
if (typeof value === "string")
{
value = new Date(value);
}
return value.toShortDateString();
}, allBindingsAccessor, null, null);
}
};
I chose to add a prototype to Date object like this (and call toShortDateStringon the Date object created in the handler)- but you can replace the logic above with Globalizeor whatever you prefer.
我选择像这样向 Date 对象添加一个原型（并调用toShortDateString在处理程序中创建的 Date 对象）-但是您可以用Globalize或您喜欢的任何内容替换上面的逻辑。
Date.prototype.toShortDateString = function ()
{
return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
};
回答by JRB Developer
If you are referencing moment.js then I would actually format in the knockout model.
如果您引用的是 moment.js，那么我实际上会在淘汰赛模型中进行格式化。
var BiographicViewModel = function (person) {
this.FirstName = ko.observable(person.first_name);
this.LastName = ko.observable(person.last_name);
this.DOB = ko.observable(moment(person.birth_date).format("MM/DD/YYYY"));
this.Gender = ko.observable(person.gender);
this.Country = ko.observable(person.country);
this.City = ko.observable(person.city);
};
