columnFilter with date-range code suggestion
columnFilter with date-range code suggestion
I made a custom enhancement to the columnFilter plug-in specifically for date-range. I added some code to keep the "from" date from being larger than the "to" date, and to keep from picking a date in the future. Basically, i use the beforeShow event in the datePicker to check the corresponding date field and limit options based on that. To do this, I had to move the sFromId and sToId definitions to the beginning of the "fnCreateDateRangeInput" function. You can ignore the additional datePicker options as they are there for my specific needs.
edit: forgot to add that you have to use the "datepickerOptions" variable when initializing the datepicker...
[code]
function fnCreateDateRangeInput(oTable) {
var sFromId = oTable.attr("id") + '_range_from_' + i;
var sToId = oTable.attr("id") + '_range_to_' + i;
/**
* custom
*/
var datepickerOptions = {
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
showAnim: 'fold',
maxDate: 'now',
beforeShow: function(fInput,fInst){
/**
* if in from box, use the to value or now for maxDate
* if in to box, use the from value for minDate
*/
if (sFromId == fInput.id)
{
var option = 'maxDate';
var otherId = sToId;
}
else
{
var option = 'minDate';
var otherId = sFromId;
}
var instance = $('#'+otherId).data('datepicker');
var otherValue = $('#'+otherId).val();
if (0 < otherValue.length)
{
var date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
otherValue, instance.settings
);
$(this).datepicker('option', option, date);
}
}
};
/**
* end custom
*/
th.html(_fnRangeLabelPart(0));
var from = $('');
from.datepicker(datepickerOptions);
th.append(from);
th.append(_fnRangeLabelPart(1));
var to = $('');
th.append(to);
th.append(_fnRangeLabelPart(2));
th.wrapInner('');
to.datepicker(datepickerOptions);
var index = i;
aiCustomSearch_Indexes.push(i);
[/code]
edit: forgot to add that you have to use the "datepickerOptions" variable when initializing the datepicker...
[code]
function fnCreateDateRangeInput(oTable) {
var sFromId = oTable.attr("id") + '_range_from_' + i;
var sToId = oTable.attr("id") + '_range_to_' + i;
/**
* custom
*/
var datepickerOptions = {
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
showAnim: 'fold',
maxDate: 'now',
beforeShow: function(fInput,fInst){
/**
* if in from box, use the to value or now for maxDate
* if in to box, use the from value for minDate
*/
if (sFromId == fInput.id)
{
var option = 'maxDate';
var otherId = sToId;
}
else
{
var option = 'minDate';
var otherId = sFromId;
}
var instance = $('#'+otherId).data('datepicker');
var otherValue = $('#'+otherId).val();
if (0 < otherValue.length)
{
var date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
otherValue, instance.settings
);
$(this).datepicker('option', option, date);
}
}
};
/**
* end custom
*/
th.html(_fnRangeLabelPart(0));
var from = $('');
from.datepicker(datepickerOptions);
th.append(from);
th.append(_fnRangeLabelPart(1));
var to = $('');
th.append(to);
th.append(_fnRangeLabelPart(2));
th.wrapInner('');
to.datepicker(datepickerOptions);
var index = i;
aiCustomSearch_Indexes.push(i);
[/code]
This discussion has been closed.