The Date Range Picker by Filament Group is probably the best date range picker available today. It gives you a wide range of flexibility to choose your own range of dates as well as particular ranges that are commonly used (Like last 7 days, Last 30 days, etc).
One of the major differences between this date picker and the others ones out there is that this one utilized jQueryUI. Not a major problem for most people, but it could be a problem for some people whose projects don’t already use jQueryUI
With such great power and flexibility, you may this it is difficult to implement. I am happy to let you know that like the rest of jQuery, it is incredibly easy to implement. With a little extra server side (or more jQuery code) you can very easily be parsed.
Ok let’s get to the code!
First you start out with any input type. For most cases you will want to use a regular text box, but you can use just about any other input tag.
<input type="text" id="datepicker" />
From there all you need to do is add a jQuery block of code.
<script type="text/javascript">
$("#datepicker").daterangepicker({
dateFormat: "yy-mm-dd",
onChange: function() {
$("#datepicker").val($("#datepicker").val());
},
});
</script>
The dateFormat command allows you to create any date format that you require. You can find how to create your own format by going to http://docs.jquery.com/UI/Datepicker/%24.datepicker.formatDate.
onChange is a function that is called once you have clicked inside of the date picker. There are many other functions that you can use to modify the functionality of the date picker.
You can take a look at the example I have put together by going to: http://www.learnjquerynow.com/demos/filamentgroup_datepicker.php
You can download the FilamentGroup Date Range Picker from: http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/
