首页 文章

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

提问于
浏览
1

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

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

默认显示

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

在datepicker之后它显示

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

我是怎么做到的,这是一种正确的方法吗?建议一个解决方案,谢谢你

1 回答

  • 2

    这是使用MomentJS的KnockoutJS的自定义绑定实现

    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>
    

相关问题