[英]Knockout.js format date item
In my view I wish to display a knockout.js
binded field that contains a date. 在我看来,我想显示
knockout.js
包含日期绑定字段。 It is just a display field and not an input field. 它只是显示字段,而不是输入字段。 Something like below when
basemodel.actionDate = ko.observable()
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
. 格式化
dd mm yyyy
的最简单方法是什么。 eg: 17 June 2013
? 例如:
17 June 2013
?
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全球化将其格式化为所需格式。
I use KO extenders for this 我为此使用KO扩展剂
http://jsfiddle.net/vRf5B/42/ http://jsfiddle.net/vRf5B/42/
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 我在博客上有一个问题,如何检索原始日期值。
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 toShortDateString
on the Date object created in the handler)- but you can replace the logic above with Globalize
or whatever you prefer. 我选择像这样向Date对象添加一个原型(并在处理程序中创建的Date对象上调用
toShortDateString
)-但您可以将以上逻辑替换为Globalize
或您喜欢的任何东西。
Date.prototype.toShortDateString = function ()
{
return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
};
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>
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);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.