Kendo UI DatePicker，删除输入样式

我在我们的应用程序中使用Kendo UI DatePicker控件，我想删除应用于触发datepicker显示输入的样式。Kendo UI DatePicker，删除输入样式

当我初始化我的日期选择器是这样的：

$('.datepicker').kendoDatePicker();

的.datepicker元件，其是一个input type='text'是由一些元件包裹，使得小日历图标就会出现。

<span class="k-widget k-datepicker k-header form__field box__filterlight__field datepicker"> 
    <span class="k-picker-wrap k-state-default"> 
    <input placeholder="from" class="form__field box__filterlight__field datepicker k-input" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="8beab73f-332b-45a7-8f0b-4a6c3faafcd6_cell_selected"> 
    <span unselectable="on" class="k-select" role="button"> 
     <span unselectable="on" class="k-icon k-i-calendar">select</span> 
    </span> 
    </span> 
</span>

但我想完全控制它，只是有日历的样式。理想情况下禁用包装Kendo UI会这样做标记将保持如下状态：

<input placeholder="from" class="form__field box__filterlight__field datepicker k-input" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="8beab73f-332b-45a7-8f0b-4a6c3faafcd6_cell_selected">

有没有办法做到这一点？我看了看文档，似乎没有办法禁用包装。

来源

2015-09-17 Charles Ouellet

如果我们手动删除包装，没有办法禁用包装，那么可能有些功能不可行。 –

我们可以使用jQuery，Javascript或其他库来定位内部元素，并将它们从DOM中隐藏，或者在文档就绪或窗口加载时将它们从DOM中移除。

我会将您的日期选择器控件包裹在DIV中，给出该ID和ID，然后使用jQuery，将所有子项目标并将其从DOM中删除。

你可以做2件事情，你可以删除图标元素，你可以使用jQuery .unwrap（）方法打开或删除父元素。

我做了一个JSFiddle，可能会让你开始。您可以在浏览器元素检查器中查看输出框架的元素，以查看要删除的元素。

https://jsfiddle.net/Ls6xv9yw/

$(function(){ 
    $('#myCalendar').find('.k-select').remove(); //Will remove the k-select element containing the icon. 
    $('#myCalendar').find('.datepicker').unwrap();//Unwrap .datepicker input from it's immediate parent if you want this. 
});

有可能通过的，因为方式的日期选择器作品除去这些会出现意想不到的情况，但这应该工作，或至少让你一起工作的路径。

来源

2015-09-17 22:05:14 ClosDesign

Kendo UI DatePicker，删除输入样式

回答

相关问题