如何将Kendo DatePicker控件设置为常规文本框?

时间:2014-04-23 16:14:52

标签: html5 css3 kendo-ui kendo-datepicker

Kendo DatePicker的外观和感觉很棒但是因为我关注了一个模型,所以我需要让它看起来像一个普通的文本框。用户单击文本框时的预期行为应该相同,但想法是隐藏小日历图标。

默认值如下:

  

http://screencast.com/t/vBwR4HasO

我希望它看起来像:

  

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

知道如何删除小日历吗?

1 个答案:

答案 0 :(得分:0)

三是没有内置功能,允许您修改日历图标的可见性,但您可以使用jQuery来删除元素以获得所需的结果。

希望以下内容能让您了解从何处着手。

$(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();
    });

});

您可能需要稍微修改一下以满足您的需求。