Print Page - Datebox filter range

Hey, in a previous thread I got an answer about how to create formatter and parser for datebox filter
and how to create custom filters for date.
but now I need to make a filter with date range like "show all dates that are between: 01/08/2014 - 05/08/2014"
and I didnt know how to make the datebox show range selection.

Please is there a way to make the datebox in the datagrid filter to show range selection? I will then create the custom filter.

Thanks, Alon.

Please use the latest 'datagrid-filter.js' file, it can be downloaded from http://www.jeasyui.com/extension/datagrid_filter.php. And then extend a new filter to allow the user to select a date range.

Code:

$.extend($.fn.datagrid.defaults.filters, {
dateRange: {
init: function(container, options){
var c = $('<div style="display:inline-block"><input class="d1"><input class="d2"></div>').appendTo(container);
c.find('.d1,.d2').datebox();
return c;
},
destroy: function(target){
$(target).find('.d1,.d2').datebox('destroy');
},
getValue: function(target){
var d1 = $(target).find('.d1');
var d2 = $(target).find('.d2');
return d1.datebox('getValue') + ':'+d2.datebox('getValue');
},
setValue: function(target, value){
var d1 = $(target).find('.d1');
var d2 = $(target).find('.d2');
var vv = value.split(':');
d1.datebox('setValue', vv[0]);
d2.datebox('setValue', vv[1]);
},
resize: function(target, width){
$(target)._outerWidth(width)._outerHeight(22);
$(target).find('.d1,.d2').datebox('resize', width/2);
}
}
});

Apply this filter to a date field.

Code:

$('#dg').datagrid().datagrid('enableFilter', [{
field:'date',
type:'dateRange',
op:[...]
}]);

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: A-K on August 05, 2014, 09:05:58 AM