Applying style_class to range_date uses the wrong element

[dwasyl]

I've setup a filter like this:

  {
        column_number: 3,
        filter_container_id: 'filter_date',
        filter_type: 'range_date',
        filter_delay: 500,
        date_format: 'yyyy-mm-dd',
        datepicker_type: 'bootstrap-datepicker',
        style_class: 'form-control',
  },

However, the generated code looks like this:

<div id="filter_date">
  <div id="yadcf-filter-wrapper--filter_date">
    <div class="yadcf-filter-wrapper form-control" id="yadcf-filter-wrapper--main-list-3" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);">
      <div class="yadcf-filter-wrapper-inner input-daterange" id="yadcf-filter-wrapper-inner--main-list-3">
        <input class="yadcf-filter-range-date yadcf-filter-range yadcf-filter-range-start" id="yadcf-filter--main-list-from-date-3" onkeydown="yadcf.preventDefaultForEnter(event);" onkeyup="yadcf.rangeDateKeyUP('-case-list','yyyy-mm-dd',event);" placeholder="From">
        <span class="yadcf-filter-range-date-seperator"></span>
        <input class="yadcf-filter-range-date yadcf-filter-range yadcf-filter-range-end" id="yadcf-filter--main-list-to-date-3" onkeydown="yadcf.preventDefaultForEnter(event);" onkeyup="yadcf.rangeDateKeyUP('-main-list','yyyy-mm-dd',event);" placeholder="To">
      </div>
      <button class="yadcf-filter-reset-button " onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);yadcf.rangeClear('-main-list',event,3); return false;" type="button">x</button>
    </div>
  </div>
</div>

The above code puts the form-control style on the yadcf-filter-wrapper div rather than on the individual <input> tags the way it does for filter_type: 'text' filters. This doesn't get the right formatting for the inputs and I believe the style_class should be attached to the individual <input>s.

[vedmack]

@dwasyl how does your css (specific for those inputs) look like ? please provide a jsfiddle test page showing it

[dwasyl]

Sure, however I pasted in the exact source (and css) generated. The form-control is applied to the wrong element in the included code sample.

[dwasyl]

@vedmack Here's a jsfiddle with the same: https://jsfiddle.net/qhgcv4fd/

You can see how the form-control gets applied to the parent container on the date range, and then on the actual inputs on the text filter.

[vedmack]

fixed in 0.9.4.beta.30, test page: https://jsfiddle.net/vedmack/pmyjgszk/1/