如何使用KnockoutJs绑定在moment.js中将日期转换为其他格式?

时间:2015-08-06 06:52:17

标签: javascript knockout.js momentjs bootstrap-datepicker

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

SELECT COUNT(DISTINCT Content_type) from Indexing where Status = 'Error';

默认显示

  

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

在datepicker之后显示

  

2015年8月6日星期五05:30:00 GMT + 0530(印度标准时间)

尝试将此值转换为其他

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

显示

  

日期无效

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

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

我是怎么做到的,这是一种正确的方法吗?提出解决方案, 三江源

1 个答案:

答案 0 :(得分:2)

这是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>