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
}
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!