create datebox range filter in datagrid

[Opan Mustopah]

hi, i have a project was need to create a filter with datebox but in range, i mean when i clicked the calendar icon, it will show two datebox, then i can choose date range i want.

i found this before: http://www.jeasyui.com/forum/index.php?topic=3653.0
but the result not was i expected.

in that example, show two datebox filter, yes, but its display inline.

it is possible for that using easyui framework?

sorry for my bad english, any help will appriciate.

thanks

[stworthy]

Please try the code below. Of course, you need to modify it to fit your requirements.

Code:

$.extend($.fn.datagrid.defaults.filters, {
	dateRange:{
		init:function(container,options){
			var input = $('<input>').appendTo(container);
			input.combo({
				panelWidth:300,
				onShowPanel:function(){
					var dd = input.combo('getText').split(':');
					var d1 = $.fn.datebox.defaults.parser(dd[0]);
					var d2 = $.fn.datebox.defaults.parser(dd[1]);
					var p = input.combo('panel');
					p.find('.c1').calendar('moveTo', d1);
					p.find('.c2').calendar('moveTo', d2);
				}
			});
			var p = input.combo('panel');
			$('<div class="c1" style="width:50%;float:left"></div><div class="c2" style="width:50%;float:right"></div>').appendTo(p);
			var c1 = p.find('.c1').calendar();
			var c2 = p.find('.c2').calendar();
			var footer = $('<div></div>').appendTo(p);
			var btn = $('<a href="javascript:void(0)">Done</a>').appendTo(footer);
			btn.bind('click', function(){
				var v1 = $.fn.datebox.defaults.formatter(c1.calendar('options').current);
				var v2 = $.fn.datebox.defaults.formatter(c2.calendar('options').current);
				var v = v1 + ':' + v2;
				input.combo('setValue', v).combo('setText', v);
				input.combo('hidePanel');
			})
			return input;
		},
		destroy:function(target){
			$(target).combo('destroy');
		},
		getValue:function(target){
			var p = $(target).combo('panel');
			var v1 = $.fn.datebox.defaults.formatter(p.find('.c1').calendar('options').current);
			var v2 = $.fn.datebox.defaults.formatter(p.find('.c2').calendar('options').current);
			return v1 + ':' + v2;
		},
		setValue:function(target, value){
			var dd = value.split(':');
			var d1 = $.fn.datebox.defaults.parser(dd[0]);
			var d2 = $.fn.datebox.defaults.parser(dd[1]);
			var p = $(target).combo('panel');
			p.find('.c1').calendar('moveTo', d1);
			p.find('.c2').calendar('moveTo', d2);
			$(target).combo('setValue', value).combo('setText', value);
		},
		resize:function(target, width){
			$(target).combo('resize', width);
		}
	}
});

$.extend($.fn.datagrid.defaults.operators, {
	between: {
		text: 'Between',
		isMatch: function(source, value){
			var dd = value.split(':');
			var d1 = $.fn.datebox.defaults.parser(dd[0]);
			var d2 = $.fn.datebox.defaults.parser(dd[1]);
			var d = $.fn.datebox.defaults.parser(source);
			return d>=d1 && d<=d2;
		}
	}
});

[Opan Mustopah]

thank you stworthy for your fast response  , its really help, now i just customized it with what i want.

[Opan Mustopah]

oh stworthy, sorry i asked again, where to place formatter in code that you gave to me? cause that calendar format still: yyyy/mm/dd

i want format it to  yyyy-mm-dd;

can you give an example using your code

thanks