How can I style a Kendo DatePicker control to look like a regular textbox?

Question

The Kendo DatePicker's look and feel is great but since I am following a mockup I need to make it looks as a regular textbox. The expected behavior when the user clicks the textbox should be the same but the idea is to hide the little calendar icon.

The default one looks like this:

http://screencast.com/t/vBwR4HasO

and I want it to look like:

http://screencast.com/t/0AzSYPS9Jaq

Any idea how to remove the small calendar?

Answer 1

Three is no in-built function to allow you to modify the visibility of the calendar icon but you can hack away at the elements using jQuery to achieve the desired result.

Hopefully the below will give you an idea of where to start with this.

$(document).ready(function() {

    // Find and remove k-picker-wrap class from Kendo DatePicker 'datepicker'
    $("#datepicker_wrapper").removeClass("k-picker-wrap");

    // Hide the icon
    $(".k-state-default > .k-select").css("visibility","hidden");

    // Add a click handler to the DatePicker to replace the functionality of the calendar button
    var datepicker = $("#datepicker").data("kendoDatePicker");
    $(".k-input").click(function() {
        datepicker.open();
    });

});

You may have to modify this slightly to meet your needs.