jQuery Grid Plugin - jqGrid - Topic: Toolbar + DatePicker http://www.trirand.com/blog/?page_id=393/help/toolbar-datepicker Simple:Press Version 5.7.5.3 kheang on Toolbar + DatePicker http://www.trirand.com/blog/?page_id=393/help/toolbar-datepicker#p19276 Help http://www.trirand.com/blog/?page_id=393/help/toolbar-datepicker#p19276

Ok so I found a way to get this working.

Not sure if my method is the best way, but it seems to work for me.

Here's what I have done for those of you interested.

In grid.custom.js I have added the following:

Near 

filterToolbar : function(p){ - line 518

I have opened another case and called mine "daterange"

I have put this code: 

// START - DATE RANGE

case 'daterange':

v = $("input[name="+nm+"_start_date]",$t.grid.hDiv).val();

if(v) {

sdata[nm+"_start_date"] = v;

sopt[nm+"_start_date"] = so;

j++;

} else {

try {

delete $t.p.postData[nm+"_start_date"];

} catch (e) {}

}

v = $("input[name="+nm+"_end_date]",$t.grid.hDiv).val();

if(v) {

sdata[nm+"_end_date"] = v;

sopt[nm+"_end_date"] = so;

j++;

} else {

try {

delete $t.p.postData[nm+"_end_date"];

} catch (e) {}

}
break;

// END - DATE RANGE

Near line 653 in the clearToolbar portion I have put another case "daterange":

// START - DATE RANGE

case 'daterange':

$("input[name="+nm+"_start_date]",$t.grid.hDiv).val(v);

if(v) {

sdata[nm+"_start_date"] = v;

j++;

} else {

try {

delete $t.p.postData[nm+"_start_date"];

} catch (e){}

}

$("input[name="+nm+"_end_date]",$t.grid.hDiv).val(v);

if(v) {

sdata[nm+"_end_date"] = v;

j++;

} else {

try {

delete $t.p.postData[nm+"_end_date"];

} catch (e){}

}

break;

// END - DATE RANGE

And on line 854 right after the last case "text" for the stype I have put another case "daterange" with the code:

// START DATE RANGE

case 'daterange':

var df = soptions.defaultValue ? soptions.defaultValue: "";

$(thd).append("<input type='text' style='width:40%;padding:0;margin-right:5px;' name='"+(cm.index || cm.name)+"_start_date' id='gs_"+cm.name+"_start_date' value='"+df+"'/>");

if(soptions.attr) {$("input",thd).attr(soptions.attr);}

if(soptions.dataInit !== undefined) { soptions.dataInit($("input",thd)[0]); }

if(soptions.dataEvents !== undefined) { bindEvents($("input",thd)[0], soptions.dataEvents); }

if(p.autosearch===true){

if(p.searchOnEnter) {

$("input",thd).keypress(function(e){

var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;

if(key == 13){

triggerToolbar();

return false;

}

return this;

});

} else {

$("input",thd).keydown(function(e){

var key = e.which;

switch (key) {

case 13:

return false;

case 9 :

case 16:

case 37:

case 38:

case 39:

case 40:

case 27:

break;

default :

if(timeoutHnd) { clearTimeout(timeoutHnd); }

timeoutHnd = setTimeout(function(){triggerToolbar();},500);

}

});

}

}

var df = soptions.defaultValue ? soptions.defaultValue: "";

$(thd).append("<input type='text' style='width:40%;padding:0px;' name='"+(cm.index || cm.name)+"_end_date' id='gs_"+cm.name+"_end_date' value='"+df+"'/>");

if(soptions.attr) {$("input",thd).attr(soptions.attr);}

if(soptions.dataInit !== undefined) { soptions.dataInit($("input",thd)[1]); }

if(soptions.dataEvents !== undefined) { bindEvents($("input",thd)[1], soptions.dataEvents); }

if(p.autosearch===true){

if(p.searchOnEnter) {

$("input",thd).keypress(function(e){

var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;

if(key == 13){

triggerToolbar();

return false;

}

return this;

});

} else {

$("input",thd).keydown(function(e){

var key = e.which;

switch (key) {

case 13:

return false;

case 9 :

case 16:

case 37:

case 38:

case 39:

case 40:

case 27:

break;

default :

if(timeoutHnd) { clearTimeout(timeoutHnd); }

timeoutHnd = setTimeout(function(){triggerToolbar();},500);

}

});

}

}

break;

// END DATE RANGE

To use it I put this in the column configuration:

search: true,

stype: "daterange",

searchoptions: {

dataInit: function (elem) {

$(elem).datepicker({ dateFormat: "yy-mm-dd" });

},

dataEvents: [

{

type: "change",

fn: function(e){

$("#list")[0].triggerToolbar();

}

}

],

attr: {

title:"Select Date"

}

},

What it basically does it add 2 input fields with the same code as text case but instead appends at the end of the name _start_date and _end_date. And when I do my searches, I look for the column_start_date and column_end_date. 

Mind you I haven't fully tested this. It works for me when I do searches, but I haven't used it with all the toolbar search methods you can do. I use the easy method where I just grab the submitted data and do my own comparisons without using any of the parameters available.

I am always open for a better solution on this. I don't recommend anyone using this work around that I am using. 

]]> Tue, 24 Aug 2010 17:58:37 +0300 kheang on Toolbar + DatePicker http://www.trirand.com/blog/?page_id=393/help/toolbar-datepicker#p19274 Help http://www.trirand.com/blog/?page_id=393/help/toolbar-datepicker#p19274 Hi,

Just to say that I love your jqgrid, I think it is pretty awesome work!

I was wondering is there an easy way to implement datepicker in the toolbar but for a range?

If I wanted to search start_date - end_date ?

I tried searching but couldn't find anything about multiple dates in the toolbar.

Thanks!

]]> Tue, 24 Aug 2010 16:31:47 +0300