Start Building Professional
Web Apps Today

Hello,

the possible solution is

cal1.attachEvent("onClick",mSelectDate); 
cal2.attachEvent("onClick",mSelectDate); 

function mSelectDate(date) { 
  dateFrom = cal1.getFormatedDate("%d/%m/%Y", date); 
  dateTo = cal2.getFormatedDate("%d/%m/%Y", date); 
  cal1.setSensitive(cal1.getFormatedDate("%d/%m/%Y", date),null) 
  mygrid.filterBy(7,function(val){
    return ((val<dateFrom)&&(val>dateTo));
  }); 
  return true; 
} 
Please take see the article http://www.dhtmlx.com/dhxdocs/doku.php?id=dhtmlxgrid:filtering for more details

Thank you very much.

I did not know the true value filtered grid 
My solution was to merge his idea with mine.
my column id = 7 is the last.
The Calendar (cal1.draw() or cal2.draw()) does not appear on the screen as shown on the link below:

http://ww1.dlbca.com.br/fdata/cal.jpg

The setPosition not work.
Do you have any solution to this problem?

Solution:
 <script>
var calenddd =
"<input id='calend1' name='calend1' readonly='readonly' type='text' />"+
"<input id='calend2' name='calend2' readonly='readonly' type='text' />";

......

 mygrid.init();
 mygrid.loadXML("xml/grid3.xml", function(){
                mygrid.attachHeader("#text_filter,#text_filter,#text_filter,#rspan,#rspan,#rspan,#rspan,"+calenddd);
    var cal1, cal2
    var dateFrom = null;
    var dateTo = null;

    cal1 = new dhtmlxCalendarObject('calend1', false, {isMonthEditable: true, isYearEditable: true});
    cal1.attachEvent("onClick",mSelectDate1);
    cal1.loadUserLanguage("br");
    cal1.draw();
    cal1.setSkin("dhx_black");
    cal1.setDateFormat("%d/%m/%Y");

    cal2 = new dhtmlxCalendarObject('calend2', false, {isMonthEditable: true, isYearEditable: true});
    cal2.attachEvent("onClick",mSelectDate2);
    cal2.loadUserLanguage("br");
    cal2.draw();
    cal2.setSkin("dhx_black");
    cal2.setDateFormat("%d/%m/%Y");
    
    function doFilter(){
     mygrid.filterBy(7,function(val){
       if(dateFrom==null){
        return (val<=dateTo);
       }else if (dateTo==null){
        return (val>=dateFrom);
       }else{
        return ((val>=dateFrom)&&(val<=dateTo));
       }
      });
     return true;
    }
    
    function mSelectDate1(date) {
     dateFrom = cal1.getFormatedDate("%d/%m/%Y", date);
     doFilter();
     return true;
    }
    function mSelectDate2(date) {
     dateTo = cal2.getFormatedDate("%d/%m/%Y", date);
     doFilter();
     return true;
    }
            });
</script>

The setPosition method also allows to set the exact position of the calendar:

calendar.setPosition(Y,X);