Applying style_class to range_date uses the wrong element
Closed this issue · 4 comments
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
.
@dwasyl how does your css (specific for those inputs) look like ? please provide a jsfiddle test page showing it
@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.
fixed in 0.9.4.beta.30, test page: https://jsfiddle.net/vedmack/pmyjgszk/1/