CODEWITHSUNDEEP
javascriptkendo-uidatepicker
Charles Ouellet
Charles Ouellet

Reputation: 6518

Kendo UI DatePicker, removing input styles

I am using a Kendo UI DatePicker control in our application, I would like to remove the styles applied to the input that triggers the datepicker to show.

When I initialize my datepicker like this:

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

The .datepicker element which is an input type='text' is wrapped by some elements so that the small calendar icon will appear. 

<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>

But I would like to have full control on it and just have the styles for the calendar. Ideally disable the wrapping Kendo UI does so the markup would stay like:

<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">

Is there a way to do that? I looked at the documentation and it does not seem to have a way to disable the wrapping.

Upvotes: 0

Views: 2571

Answers (1)

ClosDesign
ClosDesign

Reputation: 3924

What you could do us use jQuery, Javascript or other library to target the inner elements and just hide them from the DOM or remove them from the DOM on document ready or window load.

I would wrap your date picker control in a DIV, give that and ID and then using jQuery, target all the sub items and remove them from the DOM.

You can do 2 things, you can remove the icon elements and you can use the jQuery .unwrap() method to unwrap or remove the parent element.

I made a JSFiddle that might get you started. You can look at the output frame's elements in the browser element inspector to see the elements being removed.

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.
});

There might be unintended circumstances by removing these because of the way the datepicker works, but this should work, or at least get you a path to work with.

Upvotes: 1

Related Questions