简体   繁体   English

如何使用KnockoutJs绑定将数据转换为moment.js中的其他格式?

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

In my web application I use Bootstrap-datepicker-and-KnockoutJs Binding for date, How can I convert the date into other format? 在我的Web应用程序中,我对日期使用Bootstrap-datepicker-and-KnockoutJs绑定,如何将日期转换成其他格式?

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

Default it shows 默认显示

Thu Aug 06 2015 11:59:21 GMT+0530 2015年8月6日星期四,格林尼治标准时间+0530

after datepicker it shows datepicker之后显示

Thu Aug 06 2015 05:30:00 GMT+0530 (India Standard Time) 2015年8月6日星期四,格林尼治标准时间+0530(印度标准时间)

trying to convert this value to other 试图将此值转换为其他

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

it shows 表明

Invalid date 失效日期

Here I use knockout binding shows below 在这里我使用下面的敲除绑定显示

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

How I do this, Is this a proper way? 我该怎么做,这是正确的方法吗? suggest a solution, Thankyou 提出解决方案,谢谢

Here is a custom binding implementation for KnockoutJS with MomentJS 这是带有MomentJS的KnockoutJS的自定义绑定实现

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

Another option is to define ko.computed() which will use timestamp as dependent variable 另一个选择是定义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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM