Monday, May 18, 2015

Filtering date values which are greater or less than a value in DHTMLX

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
   }

No comments:

Post a Comment

Please Comment Here!

How to backup and download Database using PHP

< ?php $mysqlUserName = 'databaseusername' ; $mysqlPassword = 'databasepassword' ; $mysqlHostNa...