DateTimePicker in Grid Header

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.metro.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id='container'>
    <div id="grid" data-role='grid' data-bind='source:ds' data-columns='[{field:"",title:"",template:"<input title=\"Update Follow Up Date\" data-bind=\"value:NextFollowUpDate\" data-role=\"datetimepicker\" />",headerTemplate:"<input data-role=\"datetimepicker\">"},{field:"NextFollowUpDate",title:"Next Follow Up", format:"{0:g}"}]'></div> 
</div>

JavaScript

var viewModel = new kendo.observable({
    ds: new kendo.data.DataSource({
        data: [{ID:1,NextFollowUpDate:new Date()}],
        schema: {
            model:{id:'ID'}
        }
    })
});

kendo.bind($('#container'), viewModel);
kendo.bind($('#grid .k-grid-header'), viewModel);