jquery ui - knockout databind with jqueryUI based dateRangePicker -

i'm using jquery ui based daterangepicker trying bind knockoutjs based viewmodel via custom binder. not able make daterangepicker read observable

this.range = ko.observable("jul 1,2015 - jul 3,2015"); 

here jsfiddle attempt. wrong approach , need create this

this.startdate this.enddate 

the daterangepicker documentation states stores object following properties: start , end. stores json string in value field of <input> element used contain daterangepicker. therefore, want range observable store object start , end properties. wrote custom binding apply daterangepicker element , write object observable time different selection made:

ko.bindinghandlers.daterangepicker = {     init: function(element, valueaccessor, allbindings, viewmodel, bindingcontext) {         var $el = $(element);         $el.daterangepicker({             onchange: function() {                 var range = json.parse($el.val());                 valueaccessor()(range);             }         });         var value = valueaccessor()();         if (value) {             var range = {"start": new date(value["start"] + " 00:00:00")};             if (value["end"]) {                 range["end"] = new date(value["end"] + " 00:00:00");             }             $el.daterangepicker("setrange", range);         }     } }; 

you can apply <input> element:

<input id="e1" data-bind="daterangepicker: range"> 

if need initialize value on daterangepicker through viewmodel, need store object range observable matches format daterangepicker uses:

this.range = ko.observable({start:"2015-07-01", end:"2015-07-03"}); 

here fiddle: http://jsfiddle.net/efywmomz/

update

i altered custom binding use moment library , updated fiddle initialize range viewmodel: http://jsfiddle.net/efywmomz/1/

ko.bindinghandlers.daterangepicker = {     init: function(element, valueaccessor, allbindings, viewmodel, bindingcontext) {         var $el = $(element);         $el.daterangepicker({             onchange: function() {                 var range = json.parse($el.val());                 valueaccessor()(range);             }         });         var value = valueaccessor()();         if (value) {             var range = {"start": moment(value["start"])._d};             if (value["end"]) {                 range["end"] = moment(value["end"])._d;             }             $el.daterangepicker("setrange", range);         }     } };