在淘汰赛模板中格式化日期答案

【问题标题】：Formatting Date in Knockout Template在淘汰赛模板中格式化日期
【发布时间】：2013-07-03 18:42:05
【问题描述】：

我想在淘汰赛的模板中格式化日期。日期当前返回为

2013-07-04T00:00:00

我希望它像这样显示

07/04/2013

这是我正在使用的绑定

<td data-bind="text: FirstDate">

它们在 Knockout 的模板中是默认的格式属性吗？

【问题讨论】：

在 Knockout 中没有内置任何关于日期格式或一般格式的内容。为此，您需要使用像 moment.js 这样的第三方库。
谢谢@nemesv 我包括了moment.js。。正是我想要的。

标签： javascript knockout.js knockout-2.0

【解决方案1】：

在 Knockout 中没有内置任何关于日期格式或一般格式的内容。 text 绑定只是将属性值转换为字符串，所以如果你想要自定义格式，你需要自己做。

在 JavaScript 中处理日期并不是那么容易，因此您最好使用像 moment.js 这样的第三方库来实现这一点。它使用起来非常简单，它可以使用format method 格式化您的日期。有内置格式'L' 用于您所需的月份数字、月份日期、年份格式。

您可以在视图模型中或直接在绑定中使用 moment js，例如：

<td data-bind="text: moment(FirstDate).format('L')">

或者您可以创建一个自定义绑定处理程序来封装此格式化逻辑。

注意：如果 FirstDate 属性是数据绑定表达式中的 ko.observable，请确保使用 () 来获取其值。

【讨论】：

@lola 可用的格式选项列在 moment.js 文档中：momentjs.com/docs/#/displaying/format

【解决方案2】：

我在 Stephen Redd's date extender 的修改版本中使用 moment.js。看起来像这样，比在数据绑定中调用函数要干净一些。

<input type="text" data-bind="value: dateOfBirth.formattedDate" />

【讨论】：

【解决方案3】：

您也可以使用 MomentJs 创建扩展器：

ko.extenders.date = function (target, format) {
    return ko.computed({
        read: function () {
            var value = target();
            if (typeof value === "string") {
                value = new Date(value);
            }

            return moment(value).format("LL");
        },
        write: target
    });
}

视图模型：

self.YourDate = ko.observable().extend({ date: true });

http://momentjs.com/docs/#/displaying/format/

【讨论】：