Date Range Picker with jQuery

For any site or web application that collects data, the ability to parse that data by time periods is crucial. Yet, getting users to enter dates correctly can be hassle both for you in validation, and for the user when trying to figure out how to input it correctly. What we needed was a way that allowed our users to quickly and easily select a date range to view their data. And here at our Kirkland studio, when we think quick and easy, we think visual. The solution is a date range picker built on top of jQuery. And while the script didn't seem quite finished, it was fix-able. Developed by the Filament Group. It uses the jQuery UI addition to create a slick and powerful date range picker. Here's how to set it up on your website.

First, you need to include the javascript files of course. Which include the jQuery, jQuery UI, and date range picker files. Be aware: We are using a modified version of the daterangepicker.jQuery.js because the initial script did not support limiting date range



And the css


Next, we initialize the picker
$(function(){
    $('#range').daterangepicker({
presets: { dateRange: 'Date Range'},
        earliestDate: Date.parse("Mar 2, 2010"),
        latestDate: 'Today'
    }); 
});
Notice we are using some custom options here. First we are limiting the "custom presets" to just the custom date range picker. The date range picker has serveral options by default, and if you pass any custom ranges, note that is REPLACES rather than APPENDS the default range options. The same is true for the presetRanges option. Therefore if you wanted your date range to only show the custom date picker, you code would look like this:
$(function(){
    $('#range').daterangepicker({
presets: { dateRange: 'Date Range'},
       presetRanges: []
    }); 
});
Also we are limiting the available dates. Notice you can pass the dates as either an actual date, or a keyword date. You could also use something like "-2 weeks" or "tomorrow". You can see the list of all the options on the Filaments project page. And the element on the page.
/* Adding "Readonly" attribute allows the user to still interact
with the input, but keeps them from manually changing the date */
And there you have it. If you are using PHP you can access the date from a submitted form like this:
// Break up the date into 2 
// Default format is "MM/DD/YYYY - MM/DD/YYY"
$daterange = explode(" - ", $_REQUEST["range"]);
 
// If the $daterange array is not larger than 1
// then the user only selected a single date
if (count($daterange) === 1) $onlyDate = $daterange[0];
// Otherwise they selected a date range
else 
{
   $start = $daterange[0];
   $end = $daterange[1];
}
Small dog web development studio
View All Our Posts

Web application developers in western Washington, creating user centric web solutions for businesses of all shapes and sizes.

Our projects include ecommerce, event organization, user driven web applications and more.


Small Dog Studios, LLC. Small Dog Studios News