Title: create datebox range filter in datagrid
Post by: Opan Mustopah on October 17, 2014, 04:33:23 AM
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
Title: Re: create datebox range filter in datagrid
Post by: stworthy on October 17, 2014, 08:37:45 AM
Please try the code below. Of course, you need to modify it to fit your requirements. $.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; } } });
Title: Re: create datebox range filter in datagrid
Post by: Opan Mustopah on October 17, 2014, 08:22:55 PM
thank you stworthy for your fast response ;D, its really help, now i just customized it with what i want.
Title: Re: create datebox range filter in datagrid
Post by: Opan Mustopah on October 17, 2014, 09:02:22 PM
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
|