DatePicker - set depth dinamically

by whoamiwho

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>
<input id="picker" type="date" />
<select id="ddl">
    <option>month</option>
    <option>year</option>
    <option>decade</option>
</select>

JavaScript

var picker = $("#picker").kendoDatePicker().data("kendoDatePicker"),
    dateView = picker.dateView;

$("#ddl").kendoDropDownList({
    change: function() {
       //get value
       var value = this.value();
        
       //unbind shared calendar
       dateView.calendar.element.removeData("dateView");
        
       //set new options
       picker.options.depth = dateView.options.depth = this.value();
       picker.options.start = dateView.options.start = this.value();
        
       //set value to navigate to new view
       picker.value(picker.value());
    }        
});