|
Using the Jquery date range picker to filter a list can be a bit tricky but here is the result I came up with to save you some pain.
Step 1: Create a page with a 2 date filters
Instructions on how to create a date range filter using the OOTB sharepoints components can be found here..
Once you have completed this move onto step 2...
Step 2: Download the latest date range picker jQuery plugin
The filament group plugin can be found by clicking this link
Step 3: Add the plugin to your site
Unpack and upload ALL the files to your sharepoint server and include links to the css and js files in either your master page or inline content editor on your page.
<script type="text/javascript" src="/ **** PATH TO FILES ***** /js/daterangepicker.jQuery.js"></script>
<link rel="stylesheet" href="/ **** PATH TO FILES ***** /css/ui.daterangepicker.css" type="text/css" />
Step 4: Create a blank javascript file on your server
I find it much easier to put the jQuery and other javascript into an include file on the server and include it on the page from there while testing. It makes it much easier I find.
On your server, in the same folder as the other daterangepicker files, create a new file called "include.js". Leave it blank, we will edit it later.
Step 5: Add the new daterange input to your page.
Add a new content editor web part to your page.
Click to add new content to the webpart, then switch to html source view.
Once in the source editor add the following code and click save.
<input type="text" id="daterange" />
<script src="/ *** PATH TO FILES *** /include.js" type="text/javascript"></script>
This adds the new date range input to the page, and loads our currently empty include.js file
Step 6: Add the magic to the include.js file
Below is the code to put into the js file. It is commented to explain what each part does. Once you added it to you include.js file, save it and reload your test page and you should now have the date range picker available when you click on the new input.
$(document).ready(function() {
// variable to hold the inputs starting value
var initialVal = "";
// variable to hold the datefilters initial values
var initialDates = new Array(1);
var j = 0;
// Loop over the date filters on the page and store
// their values in the initialDates array
$('td.ms-dtinput input.ms-input').each(function()
{
initialDates[j] = $(this).val();
j = j + 1;
});
// Set the initial value of the daterange picker input.
// If the initial datefilter values are the same, only enter one date
// in the input
if(initialDates [1]== initialDates [0]){
initialVal = "" + initialDates [0];
} else {
initialVal = "" + initialDates [0] + " - " +initialDates [1];
}
// Set the value
$('#daterange').val(initialVal);
// Initialise the daterangepicker control
$('#daterange').daterangepicker({
dateFormat:"m/d/yy",
onClose: function(a){
// Add a delay to the onclose call as there is a small
// bug-feature with the date range picker that can
// return incorrect values if it is not delayed slightly
setTimeout(function(){
parseAndChangeDates();
}, 1000 );
}
});
// This function is run once the done button is clicked
function parseAndChangeDates(){
// get the value from the input
var dateInputValue = $('#daterange').val();
// Split the value to get the start and end date
var range = dateInputValue.split('-');
var i = 0;
// If there is only one date the make the end date [1] the
// same as the start date [0]
if(range[1]== undefined){
range[1]= range[0];
}
// Loop over the date filters and change their values to the new ones
$('td.ms-dtinput input.ms-input').each(function()
{
$(this).val(jQuery.trim(range[i]));
i = i + 1;
// On the second iteration activate the filters change() function
// to reload the page... magic!
if(i==2){
$(this).change();
}
})
}
});
Step 7: Hide the old date filters
Edit the two date filters on the page and set their width and height to 0.
Voila... done-burgers!
All going well you should now be able to filter your lists by the jquery daterangepicker which IMO is much more user friendly than the OOTB alternative. |
