Knockout.js 格式日期项答案

【问题标题】：Knockout.js format date itemKnockout.js 格式日期项
【发布时间】：2013-06-13 11:15:25
【问题描述】：

在我看来，我希望显示一个包含日期的knockout.js 绑定字段。它只是一个显示字段而不是输入字段。当basemodel.actionDate = ko.observable()

<p class="display-field" data-bind="text: baseModel.actionDate"/>

但是显示如下：

2013-06-17T11:56:18.4537687Z

格式化此dd mm yyyy 的最简单方法是什么？例如：17 June 2013?

【问题讨论】：

您是将date 对象存储在可观察对象中还是字符串“2013-06-17T11:56:18.4537687Z”中？

标签： html datetime knockout.js

【解决方案1】：

我推荐moment.js 日期格式库。

使用它，您可以在视图中执行以下操作：

<p class="display-field" data-bind="text: moment(baseModel.actionDate()).format('LL')"/>

【讨论】：

谢谢。看起来不错。但我得到一个“未定义的 NaN 0NaN”错误显示。有什么想法吗？
啊，如果您的actionDate 是一个 ko.observable，那么您需要将() 放入其中以获取值，然后再将其传递给 moment。我修改了帖子。
但是你必须将它添加到客户端......这可能会更慢而且会强制加载更多资源。
如果您使用的是 browserify，请确保在全局范围内声明 moment：global.moment = require('moment');
@lola 使用format('LLLL') 或阅读documentation

【解决方案2】：

要么确保服务以正确的格式输出，要么在客户端输出格式

如果你想在客户端做，那么你可以将 ISO 日期字符串解析为 Date 对象，然后使用 jQuery globalize 将其格式化为所需的格式。

我为此使用 KO 扩展器

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
    });
}

更新

我的博客上有一个关于如何检索原始日期值的问题我可以将原始值暴露在计算对象上

http://jsfiddle.net/vRf5B/91/

【讨论】：

很好的提醒：改变服务输出！我最初用谷歌搜索了这个..然后，记得我可以控制序列化服务器端。此行全局影响 ASP.NET MVC 应用程序如何处理所有 JSON 序列化（放置在 WebApiConfig.Register 方法中）： GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.DateFormatString = "dd/MM/yyyy"
对于使用 KO 或 Angular 的现代 MVVM 站点，您需要真正的 Date 对象，以便您可以对它们应用逻辑
我尝试了您的解决方案，它适用于您的格式，但如果我想输入我的格式，需要更改什么？我尝试了类似的方法，但它不起作用：<span data-bind="text: date { format: 'dd/mm/yyyy' }"></span>
好的，我必须了解您的 date: true 是格式。硬东西！ .extend({ date: "dd/MM/yyyy" }); 谢谢！

【解决方案3】：

声明格式函数：

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);
};

并将它与日期字符串一起使用：

<span data-bind="text: new Date(TaxAuthority.RegDate).toFormattedDate()"></span>

【讨论】：

【解决方案4】：

我在映射插件尝试使用扩展器时遇到了一些问题（我认为）。由于我只显示日期并且不允许编辑它们，我更喜欢使用这样的绑定处理程序：

Shipped on <span data-bind="date: shipDt"></span>

这是处理程序：

    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);
        }
    };

我选择像这样向 Date 对象添加一个原型（并在处理程序中创建的 Date 对象上调用 toShortDateString）- 但您可以将上面的逻辑替换为 Globalize 或您喜欢的任何内容。

Date.prototype.toShortDateString = function ()
{
    return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
};

【讨论】：

【解决方案5】：

如果您引用 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);        
};

【讨论】：