How to display only date in KendoDateTime picker - asp.net-mvc

Question

I've placed a kendo DateTime Picker on a web page.
According to the requirement initially it should display only date and if user needs then he/she can select the time as well.
Below is the code which initially fill the kendo datetime picker:
<input id="txtDate" type="text" maxlength="10" style="width: 250px;" value="" />
<script type="text/javascript">
$('#txtDate').kendoDateTimePicker({ value: new Date() });
</script>
The above code fill date and time. But i want to fill only current date.
I tried with the following code to check if it can fill only date. But it adds the 12:00 AM with date.
$('#txtDate').kendoDateTimePicker({ value: new Date('04/30/2017') });
Is there any way to fill only date in Kendo DateTime picker?

Answer 1

What you are looking is kendoDatePicker, which will allows user to select only date.
$(document).ready(function()
$("#txtDate").kendoDatePicker();
});
Edit: or add formatting property to kendoDateTimePicker, which will effect how value is displayed for user.
$('#txtDate').kendoDateTimePicker({
value: new Date(),
format: 'MM/dd/yyyy'
});

Answer 2

If you never need to display the time one possible option might be to store the datetime value as an attribute of the current widget and on the submit event of the form manually ovverride the values:
<script>
$(document).ready(function () {
$("#datetimepicker").kendoDateTimePicker({
format: "yyyy/MM/dd",
change: function(data){
data.sender.element.attr("value", data.sender.value());
}
});
});
$("form").on("submit", function(){
$("input").each(function(){
var inputValue = $(this).attr("value");
if(inputValue){
$(this).val(inputValue);
}
});
})
</script>
If you want to display the time after the user pick a time you can change the format of the widget subscribing a function to the open event:
<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
format: "yyyy/MM/dd",
value: new Date(),
open: function(e){
if(e.view == "time"){
this.setOptions({format: "yyyy/MM/dd HH:mm"})
}
if(e.view == "date"){
this.setOptions({format: "yyyy/MM/dd"})
}
}
});

Answer 3

You can build on the answers given above and detect when a time is selected then reapply a display format in javascript.

Answer 4

Via jQuery:
$('#txtDate').datetimepicker({
format: 'L'
});

Answer 5

Instead of using Kendo.DateTimePickerFor you can use DatePickerFor.
This way you can get rid of hour part.
#(Html.Kendo().DatePickerFor(model => model.StartDate).HtmlAttributes(new { #class = "form-control" , required="required"}))