Using Knockout.js to bind bootstrap daterange picker and parse span contents

Question

I'm new to knockout and trying to get what should be a simple task up and running. I'm working on an MVC4 .NET app with the intention of binding a date range picker to make ajax requests for updating Highchart graph data. I'm using Dan Grossman's bootstrap-themed date picker and it's been great so far (https://github.com/dangrossman/bootstrap-daterangepicker).

The basic goal is to watch the span that this jQuery date ranger picker updates, and then use knockout to pass this value to another part of the app for the ajax request.

I've tried everything I can find online.. valueUpdate:change on the span to using some jQuery within knockout to get the same goal done, to using a subscribe function to watch the value of the span before and after the date picker is used. Apparently this uses the jQuery .change() event handler, which is only good on inputs, selects, and textareas.. not spans.

Here's the fiddle of what I have so far: http://jsfiddle.net/eyygK/9/

Appreciate any help and input.

Answer 1

You just need to update your currDateRange property in your view model, when a new date range is updated.

$('#reportrange').daterangepicker({
    ...,
    function (start, end) {
        var dateRangeText = start.toString('MM/d/yy') + ' - ' + end.toString('MM/d/yy');
        vm.currDateRange(dateRangeText);
    }
});

So when you update your date range, it will report it to knockout, and knockout will update all the places where it's used, the span.

Now you can subscribe to the currDateRange, and do your Ajax calls from there.

self.currDateRange = ko.observable("09/24/12 - 09/24/12");
self.currDateRange.subscribe(function(newValue) {
   $.ajax({...});
});

That way it doesn't matter where the update comes from, knockout will notify everybody.