Kendo DatePicker change event not firing

by mrrodd

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id='container'>
        <div id='searchContainer'>            
            <input id='datePicker' 
                   data-role='datepicker' 
                   readonly="readonly" data-bind='value:dateFilter'
                   data-start='year' data-depth='year' data-format='MMMM yyyy' />
            <hr />
            <a class='k-button' data-bind='click:showPreviousMonth,text:previousMonth'></a>
            <span data-bind='text:dateFilterFormatted'></span>
            <a class='k-button' data-bind='click:showNextMonth,text:nextMonth'></a>
        </div>
</div>

JavaScript

var viewModel = new kendo.observable({
    dateFilter: new Date(),
    previousMonth: function() {
        var tmp = new Date(this.get('dateFilter'));
        tmp.setMonth(tmp.getMonth() - 1);
        return '<< ' + kendo.toString(tmp, 'MMMM yyyy');
    },
    nextMonth: function() {
        var tmp = new Date(this.get('dateFilter'));
        tmp.setMonth(tmp.getMonth() + 1);
        return kendo.toString(tmp, 'MMMM yyyy') + ' >>';
    },
    dateFilterFormatted: function() {
        return kendo.toString(this.get('dateFilter'), 'MMMM yyyy');
    },
    showPreviousMonth: function(e) {
        console.warn('prev');
        var tmp = new Date(this.get('dateFilter'));
        tmp.setMonth(tmp.getMonth() - 1);

        this.set('dateFilter', tmp);
    },
    showNextMonth: function(e) {
        console.warn('next');
        var tmp = new Date(this.get('dateFilter'));
        tmp.setMonth(tmp.getMonth() - 1);

        this.set('dateFilter', tmp);
    }
});

kendo.bind($('#container'), viewModel);