Kendo datepicker is dispalying date in long format with time how to avoid it - knockout-2.0

Question

This is code I am using can be seen by clicking the this link
http://jsfiddle.net/fGq5w/1/
On click of the button , I change the date. But the time is also displayed.
How to display one date alone when i click the button.
HTML CODE
<input id="myDatePicker" data-bind="value: currentDate" />
<h2>Current Date is:<strong data-bind="text: currentDate"></strong></h2>
<input type='button' value='change Date' onclick='changeDate();return false;' />
Javascript
var vm = {
currentDate: ko.observable()
};
$(function(){
ko.applyBindings(vm);
$("#myDatePicker").kendoDatePicker();
});
function changeDate()
{
alert('ok');
vm.currentDate(new Date(2014,1,1));
}

Answer 1

This is more of a Kendo question. Just format the date with kendo's date formatting tools:
http://docs.kendoui.com/getting-started/framework/globalization/dateformatting
eg...
vm.currentDate(kendo.toString(new Date(2013,0,1), "MM/dd/yyyy"));

Answer 2

Your Code with additional functionality to pre-fill the date TextBox.
var vm = {
currentDate: ko.observable(kendo.toString(new Date(),'MM/dd/yyyy'))
};
$(function(){
ko.applyBindings(vm);
$("#myDatePicker").kendoDatePicker();
});
enter code here
function changeDate()
{
alert('ok');
vm.currentDate(kendo.toString(new Date(2014,1,1),'MM/dd/yyyy'));
}

Answer 3

In Knockout 3.3.0, you can create an extension to handle the formatting since calling a function manually isn't terribly ideal:
(In the snipper below I'm using moment.js to parse the date, but you could use kendo's date parser - although it doesn't work with certain ISO formatted dates)
ko.extenders.stripTime = function (target) {
var result = ko.pureComputed({
read: target,
write: function (value) {
if (value) {
target(moment(value).format(shell.getDateFormatString()));
}
else {
target(value);
}
}
}).extend({ notify: 'always' });
result(target());
return result;
};
In your client-side viewmodel, apply the extension to your observable:
self.SomeDateProperty = ko.observable().extend({ stripTime: null });
I recommend not using ko.toJS when you try to get a javascript object from your observables when using kendo datepicker - Instead, use ko.mapping (you need to download the JS library separately).
var someJavascriptObject = ko.mapping.toJS(viewModel);