Hiding input wrappers

by krustev

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<br>
<dl>
    <dt>Name:</dt>
    <dd><input type="text" class="ctlTextBox" value="Hobart Dorfman"></dd>
</dl>
<dl>
    <dt>Birthdate:</dt>
    <dd>
        <input type="text" class="ctlDatePicker" value="01/25/12">
    </dd>
</dl>

CSS

body { font: 12px/1.5 Tahoma,sans-serif; }
dl { margin: 10px 25px 10px 0px; }
dt { display: inline; font-weight: bold; margin-right: 8px; }
dd { display: inline; margin: 0px; padding: 0px; }

.ctlHidden,
.ctlHidden .k-picker-wrap {
    background-color: transparent !important;
    border-color: transparent !important;
}

.ctlHidden .k-select {
    visibility: hidden !important;
}

.ctlHidden .k-input {
    border-color: transparent !important;
    box-shadow: none;
    -webkit-box-shadow: none;
}

JavaScript

$(document).ready(function () {
    $(".ctlDatePicker").kendoDatePicker();
    $(".ctlTextBox").kendoAutoComplete();
    
    $('.ctlDatePicker,.ctlTextBox').closest(".k-widget")
        .addClass("ctlHidden")
        .mouseenter(function () {
             $(this).closest(".k-widget").removeClass("ctlHidden");
        })
        .mouseleave(function() {
            // if not focused...
             $(this).closest(".k-widget").addClass("ctlHidden");
        });
});