javascript - Kendo UI DatePicker，删除输入样式

Question

我在应用程序中使用 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">

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

Answer 1

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

我会将日期选择器控件包装在 DIV 中，给出该控件和 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.
});

由于日期选择器的工作方式，删除这些内容可能会出现意想不到的情况，但这应该有效，或者至少为您提供了一条工作路径。