Hiding the Kendo UI DatePicker TextBox

Question

I have an application where the users are used to a specifically formatted date, such as the following format ([] denotes a textbox):

[Month] [Day] [Year] [Time] [AM/PM]

Each component is a separate textbox, so what I would like to do is use the Kendo UI DateTimePicker for this, and through JavaScript on selection set my custom textboxes with a value. I'm OK with that part, but I can't figure out how, through the API, to hide the input textbox from the view, so that I only see the buttons for date and time.

Anybody have an idea how that can be done?

Answer 1

One possible way to hide it is to put it under an empty div with 0px width , height and set overflow;"hidden"

Also have separate button and onclick open the datepicker programmatically.

    <div style="width:0px; height:0px; overflow:hidden;">put datepicker control here</div>​

Answer 2

Set width of span with class 'k-widget k-datepicker k-header' to 0.

Edited. This is my approach and it is working.

@(Html.Kendo().DatePickerFor(x => Model.Date)
              .Name("date").HtmlAttributes(new { style = "width:0px;" })
              .Events(e => e.Change("onChange")))

Answer 3

If you will allow the user to select the date from KendoUI DateTimePicker, try defining the format as "MMM dd yy HH tt":

$("#datepicker").kendoDateTimePicker({
    format: "MMM dd yy HH tt"
});

This will format the selected date with your desired format.

For disallowing the user from typing, you should do:

$("#datepicker").kendoDateTimePicker({
    format: "MMM dd yyyy HH tt"
});
$("#datepicker").attr("disabled", "disabled");

This is different than:

$("#datepicker").kendoDateTimePicker({
    format: "MMM dd yyyy HH tt"
});
$("#datepicker").data("kendoDateTimePicker").enable(false);

Since this disables using the buttons too.

Check it here: http://jsfiddle.net/OnaBai/AL2FJ/