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