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，刪除輸入樣式

回答

相關問題