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

Question

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

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

默认显示

Thu Aug 06 2015 11:59:21 GMT+0530

在日期选择器之后显示

Thu Aug 06 2015 05:30:00 GMT+0530 (India Standard Time)

正在尝试将此值转换为其他值

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

显示

Invalid date

这里我用的是knockout绑定显示如下

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

我是怎么做到的，这是正确的方法吗？建议一个解决方案，谢谢

Answer 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>

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

How to convert date into other format in moment.js using KnockoutJs Binding?

javascript

knockout.js

momentjs

bootstrap-datepicker