Gary Brett asked 10 years ago
Good afternoon, has anyone successfully included a filter to return all records between 2 days on single column?
I have a column called ActiveDate which is the dates the case was entered? I wanted to have the 2 date fields sit above the grid to allow filtering on records entered between the two dates..
I know the search feature is at bottom just wanted something a bit quicker?
Thanks in advance?
Stephen Hartigan answered 10 years ago
A simple date range picker that could be assigned to the column filter would be a great addition!
Abu Ghufran answered 10 years ago
Hello,
Here is external search fields demo+code.
http://www.phpgrid.org/demo/demos/search/search-form.php
http://www.phpgrid.org/demo/demos/search/search-form.phps
@Stephan, thanks for the suggestion.
Gary Brett answered 10 years ago
Brilliant, that looks great Abu, really appreciate your help. I'm looking on a phone at moment so can't tell properly but does the search have the calender pop up to search dates?
Abu Ghufran answered 10 years ago
It's normal html field. You can connect any datepicker library using JS/Jquery.
Gary Brett answered 10 years ago
Hi Abu hope your well. Are we able to use your inbuilt datepicker so to keep the look familiar? I have tried to search for where you call it but as its on the [col] I cant find where to add the css for popup to the input fields?
Thank you
Abu Ghufran answered 10 years ago
You can apply style/css using editoptions. All keys of editoptions are converted to input html attributes.
$col["editoptions"]["style"] = "font-size:14px";
$col["editoptions"]["class"] = "abc";
Gary Brett answered 10 years ago
Sorry Abu, my mistake, I have managed to add a datepicker no problem, its just now that the input style has changed from 'text' to 'date' the filter no longer works..
The datepicker needs to have the input has "date", does this mess up the script you posted?
<form>
Date from: <input type="date" id="datefrom"/>
Date to: <input type="date" id="dateto"/>
</form>
Thanks, appreciate your help greatly
Abu Ghufran answered 10 years ago
Please show the code, how you are connecting datepicker to fields.
May be i can guide how to exclude filters from it.
Gary Brett answered 10 years ago
Of course Abu,I took your kind suggestion above http://www.phpgrid.org/demo/demos/search/search-form.php and implemented into my grid. When I inspect the input element in Chrome I can see it takes its css from the <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"> that came with phpgrid..
So I can basically just change the input type to any within that css file and it does in deed change the field style but breaks the search..
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../lib/js/themes/flick/jquery-ui.custom.css"></link>
<!–<link rel="stylesheet" type="text/css" media="screen" href="../lib/js/themes/<?php echo $themes[$i] ?>/jquery-ui.custom.css"> –>
<link rel="stylesheet" type="text/css" media="screen" href="../lib/js/jqgrid/css/ui.jqgrid.css">
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="../lib/js/jqgrid/css/ui.bootstrap.jqgrid.css">
<script src="../lib/js/jquery.min.js" type="text/javascript"></script>
<script src="../lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
</head>
<body>
<fieldset style="font-family:tahoma; font-size:12px">
<form>
Date from: <input type="date" id="datefrom"/>
Date to: <input type="date" id="dateto"/>
<input type="submit" id="search_date" value="Filter">
</form>
</fieldset>
<div style="margin:5px">
<?php echo $out?>
<script>
jQuery("#search_text").click(function() {
grid = jQuery("#list1");
var searchFiler = jQuery("#filter").val(), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
jQuery.extend(grid[0].p.postData,{filters:""});
}
f = {groupOp:"OR",rules:[]};
// initialize search, 'name' field equal to (eq) 'Client 1'
// operators: ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
f.rules.push({field:"name",op:"cn",data:searchFiler});
f.rules.push({field:"PolicyStatusDate",op:"cn",data:searchFiler});
grid[0].p.search = true;
jQuery.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
grid.trigger("reloadGrid",[{jqgrid_page:1,current:true}]);
return false;
});
jQuery("#search_date").click(function() {
grid = jQuery("#list1");
var f = {groupOp:"AND",rules:[]};
if (jQuery("#datefrom").val())
f.rules.push({field:"PolicyStatusDate",op:"ge",data:jQuery("#datefrom").val()});
if (jQuery("#dateto").val())
f.rules.push({field:"PolicyStatusDate",op:"le",data:jQuery("#dateto").val()});
grid[0].p.search = true;
jQuery.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
grid.trigger("reloadGrid",[{jqgrid_page:1,current:true}]);
return false;
});
</script>
Abu Ghufran answered 10 years ago
Hello,
I've added datepicker in demo sample. Kindly update code in your demo browser and check.
Actual work in on line 180.
Demo:http://www.phpgrid.org/demo/demos/search/search-form.php
Code:http://www.phpgrid.org/demo/demos/search/search-form.phps
Gary Brett answered 10 years ago
In any future release Abu would that type of datepicker be available inside the grid, I am thinking for clients date of birth for example, much easier to select year using that grid
$col["formatter"] = "date";
$col["formatoptions"] = array("srcformat"=>'Y-m-d',"newformat"=>'d/m/Y');
If not no worries just a thought
Abu Ghufran answered 10 years ago
This datepicker is part of library, and it work without any additional dependency.
Same datepicker comes up when we edit date format field in edit dialog.
However to adjust format of date, you can refer the link commented just above the dateFormat in code.
Gary Brett answered 10 years ago
Hi Abu, may have confused things a little. On you updated demo above the date picker in html search is different style to the one displayed in the edit option on the grid. I was wondering if the grid date picker could be configured to use same format whereby you can select year separately. Just thought that would be beneficial when selecting dates like birthdays
