DatePicker - MVVM

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="container">
<input id="dateFrom" type="date" class="datePicker" data-role="datepicker" data-bind="value: startDate"/>
</div>

<div id="container2">
    <div id="calendar" data-role="calendar" data-bind="value: from, events: {change: updated}" />
</div>

JavaScript

var viewModel = kendo.observable({
    startDate: new Date(2012, 2, 31)
});
kendo.bind($("#container"), viewModel);


$(".datePicker").width(182).kendoDatePicker({
    format: "yyyy/MM/dd",
    min: new Date(2012, 2, 31)
});




 
var mainViewModel = kendo.observable({
    updated: function () {
        alert(this.from);
        alert(this.get("from"));
    },
    from: new Date()
});       

kendo.bind($("#container2"), mainViewModel);