Kendo UI DatePicker,删除输入样式

时间:2015-09-17 14:36:43

标签: javascript kendo-ui datepicker

我在我们的应用程序中使用了一个Kendo UI DatePicker控件,我想删除应用于触发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">

有办法吗?我查看了文档,似乎没有办法禁用包装

1 个答案:

答案 0 :(得分:1)

你可以做什么我们使用jQuery,Javascript或其他库来定位内部元素,只是将它们从DOM中隐藏起来,或者在文档就绪或窗口加载时从DOM中删除它们。

我会将日期选择器控件包装在DIV中,提供该ID和ID然后使用jQuery,定位所有子项并将其从DOM中删除。

你可以做两件事,你可以删除图标元素,你可以使用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.
});

由于datepicker的工作方式,删除这些可能会出现意外情况,但这应该有效,或者至少可以让你找到合适的途径。