EasyUI Forum

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

Title: Datebox filter range
Post by: A-K on August 05, 2014, 09:05:58 AM
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.

Title: Re: Datebox filter range
Post by: stworthy on August 06, 2014, 07:54:20 AM
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.
$.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);
return c;
destroy: function(target){
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).find('.d1,.d2').datebox('resize', width/2);

Apply this filter to a date field.
$('#dg').datagrid().datagrid('enableFilter', [{

Title: Re: Datebox filter range
Post by: A-K on August 08, 2014, 03:14:13 AM
Thank you!