Filtering date values which are greater or less than a value

Suite and Optimus Suite 5
#1

Hi,

I have a dhtmlxgrid with a column containing data with date format.
That column contains values like “01/01/2013”, “04/05/2013”.
I would like to put a filter like “>01/02/2013” or “01/01/2013<” this would have the effect to filter
the rows which have date values greater or less than “01/02/2013”.

I would like to know if it’s possible to implement that the filter .

Thanks in advance.

#2

You need to create your custom filter.
Please, refer to the following tutorial:
docs.dhtmlx.com/doku.php?id=dhtm … of_filters

#3

Hi,

Here is an implementation of a date range filter in a grid, the filter is applied by adding ‘#daterange_filter’ to the relevant column in the attachHeader function call.

Note the date format for the calendar popups and the column is MM/DD/YYYY

dhtmlXGridObject.prototype._in_header_daterange_filter=function(a,b){
								
		a.innerHTML="<div style='width:100%; margin:0 auto; text-align: left'>From:<input type='text' id='datefrom' style='width:80px;font-size:8pt;font-family:Tahoma;-moz-user-select:text;'><br>To:<input type='text' id='dateto' style='width:80px;font-size:8pt;font-family:Tahoma;-moz-user-select:text;'></div>";
	
		a.onclick=a.onmousedown=function(a){
			return(a||event).cancelBubble=!0
		};
		
		a.onselectstart=function(){
			return event.cancelBubble=!0
		};
				
		datefrom = getChildElement(a.firstChild,"datefrom");
		dateto = getChildElement(a.firstChild,"dateto");
		
		myCalendar = new dhtmlXCalendarObject([datefrom , dateto])
		myCalendar.setDateFormat("%m/%d/%Y");		//Date format MM/DD/YYY
		
		myCalendar.attachEvent("onClick",function(date){
		     mygrid.filterByAll();
		})

		this.makeFilter(datefrom ,b);
		this.makeFilter(dateto ,b);
				
		datefrom._filter=function(){
			var a=this.value;
			return a==""?"":function(b){
				
				aDate = parseDate(a)
				bDate = parseDate(b)	
				return aDate <= bDate ;
				
			}
		}
		
		dateto._filter=function(){

			var a=this.value;
			return a==""?"":function(b){
				aDate = parseDate(a)
				bDate = parseDate(b)	
				return aDate >= bDate 
			}		
		}

		this._filters_ready()		
		
	};
	
	// parse a date in mm/dd/yyyy format
	function parseDate(input) {
	  var parts = input.split('/');
	
	  // new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]])	 
	  return new Date(parts[2], parts[0]-1, parts[1]).getTime(); // Date format MM/DD/YYY
	}

	function getChildElement(element,id) {

		for (i=0;i<element.childNodes.length;i++)
		{
			if (element.childNodes[i].id == id)
				return element.childNodes[i];
		}
	
		return null
	}

Kevin

#4

Great job, Kevin! thumbs up

#5

Thanks! This is terrific!

NOTE: This code works perfectly as is, except that ‘mygrid’, roughly a third of the way down, should be changed to the actual name of the user’s grid.

#6

Thank you.
This code perfectly works fine. But we are facing some other problem while filtering the data for columns which exists at the end.

Suppose if the column sequence is 0,1,2,3,4 then without any date range filters everything works fine. But if we include date range filter for any of these columns, then 3,4 column filters doesn’t work.

When I remove the line this.makeFilter(dateto ,b); from above code again everything works fine. Anybody face this issue?

#7

Unfortunately the issue cannot be reproduced locally.
If the problem still occurs for you please, provide with a complete demo, where it can be reconstructed.

#8

Yes Veeresham,
I get exactly what you have experienced. I have 20 columns, and a date filter as described in the first column. The text filter on the last column (only) doesn’t work. Removing the date filter, all is well.

#9

Could you please, share with a complete demo or a demo link, where the described problem can be reconstructed locally.

#10

Has anyone gotten this to work properly when there is more than 1 column that is a dhxCalendar format? If so, please provide example.

#11

Please, try to use the following one:

dhtmlXGridObject.prototype._in_header_daterange_filter=function(a,b){
      var grid=this
                        
      a.innerHTML="<div style='width:100%; margin:0 auto; text-align: left'>From:<input type='text' style='width:80px;font-size:8pt;font-family:Tahoma;-moz-user-select:text;'><br>To:<input type='text' style='width:80px;font-size:8pt;font-family:Tahoma;-moz-user-select:text;'></div>";
   
      a.onclick=a.onmousedown=function(a){
         return(a||event).cancelBubble=!0
      };
      
      a.onselectstart=function(){
         return event.cancelBubble=!0
      };
      var datefrom = a.childNodes[0].childNodes[1];
      var dateto = a.childNodes[0].childNodes[4]
      
      var myCalendar = new dhtmlXCalendarObject([datefrom , dateto])
      myCalendar.setDateFormat(grid._dtmask||"%d/%m/%Y");      //Date format MM/DD/YYY
      
      myCalendar.attachEvent("onClick",function(date){
           grid.filterByAll();
      })
       this.makeFilter(datefrom ,b);
      this.makeFilter(dateto ,b);
            
      datefrom._filter=function(){
         var a=this.value;
         return a==""?"":function(b){
            aDate = window.dhx4.str2date(a,this._dtmask)
            bDate = window.dhx4.str2date(b,this._dtmask)
            return aDate <= bDate ;
            
         }
      }
      
      dateto._filter=function(){
         var a=this.value;
         return a==""?"":function(b){
            aDate = window.dhx4.str2date(a,this._dtmask)
            bDate = window.dhx4.str2date(b,this._dtmask)   
            return aDate >= bDate 
         }      
      }

      this._filters_ready()
   };