Francis Khoury Francis Khoury - 3 months ago 29
CSS Question

Hiding Kendo DatePicker button - selectively (CSS)

I discovered on the Telerik site that one can hide the default button on the Kendo DatePicker with the following style tag:

<style>
.k-datepicker .k-select {
display: none;
}

.k-datepicker .k-picker-wrap {
padding: 0;
}

.k-datepicker .k-input {
border-radius: 3px;
}
</style>


How would I apply this style to one Kendo DatePicker on a given page, but not the other one?

Forgive my newbie-analysis, but I believe that the style given above uses class names from the Kendo css file, and this leaves me unsure how to apply it to certain controls and not others.

My expired license prevents me from posting this question with Telerik.

Thanks!

Answer

In the JS to initialize your date picker, you can add an attribute like so:

$("#datepicker").kendoDatePicker()
   .attr("class", "datepicker_hidden");

Then use your new class to style it

.datepicker_hidden .k-select {
    opacity: 0;
}

EDIT: You'll probably still want to be able to click to open the date picker, so I changed the CSS to reflect that. If you plan on "clicking" the date picker programatically, then you can use display:none; for the css.

Here is an example of a hidden and non-hidden date picker: http://dojo.telerik.com/UlAcE