如何使用 KnockoutJs Binding 在 moment.js 中将日期转换为其他格式？答案

【问题标题】：How to convert date into other format in moment.js using KnockoutJs Binding?如何使用 KnockoutJs Binding 在 moment.js 中将日期转换为其他格式？
【发布时间】：2015-08-06 06:52:16
【问题描述】：

在我的 Web 应用程序中，我使用 Bootstrap-datepicker-and-KnockoutJs 绑定日期，如何将日期转换为其他格式？

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

默认显示

2015 年 8 月 6 日星期四 11:59:21 GMT+0530

在日期选择器之后显示

2015 年 8 月 6 日星期四 05:30:00 GMT+0530（印度标准时间）

试图将此值转换为其他值

moment(self.date, '2015-08-06T011:32:21.196Z')

它显示

无效日期

这里我使用了下面的淘汰赛绑定展示

ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options).on("changeDate", function (ev) {
        var observable = valueAccessor();
        observable(ev.date);
    });
},
update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).datepicker("setValue", value);
}
};

我该怎么做，这是正确的方法吗？提出解决方案，谢谢你

【问题讨论】：

标签： javascript knockout.js momentjs bootstrap-datepicker

【解决方案1】：

这是 KnockoutJS 与 MomentJS 的自定义绑定实现

https://github.com/adrotec/knockout-date-bindings

另一种选择是定义ko.computed()，它将使用时间戳作为因变量

var Vm = function() {
      var self = this;
      
      self.date = ko.observable();
      self.dateFormatted = ko.computed(function() {
        return moment(self.date()).format("DD/MM/YYYY HH:mm:ss")
      });
      
      setInterval(function() {
        self.date(new Date());
      }, 1000);
    };
    
    var vm = new Vm();
    ko.applyBindings(vm, $("body")[0]);

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="knockout@3.3.0" data-semver="3.3.0" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script data-require="moment.js@2.10.2" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1 data-bind="text: dateFormatted"></h1>
    <script>
    var Vm = function() {
      var self = this;
      
      self.date = ko.observable();
      self.dateFormatted = ko.computed(function() {
        return moment(self.date()).format("DD/MM/YYYY HH:mm:ss")
      });
      
      setInterval(function() {
        self.date(new Date());
      }, 1000);
    };
    
    var vm = new Vm();
    ko.applyBindings(vm, $("body")[0]);
  </script>
  </body>

</html>

【讨论】：