January 08 2013

Jquery Date Range Picker

Tagged Under : ,

jquery
Following last post Javascript Date Range Picker it was using pure javascript without using any framework.

Now we built another with JQuery.

First set up required dependencies of jQuery and JQuery UI and also include jquery-daterange-picker-0.1.0.min.js.
<link type="text/css" href="jquery-ui-1.8.11.custom.css">
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="jquery-daterange-picker-0.1.0.min.js"></script>

After that, add the Jquery code as below
$(function(){
	$.datepicker.setDefaults({dateFormat: 'dd-mm-yy'});
	$.daterangepicker({
		fromSelector: "#fromDate",
		toSelector: "#toDate"
	});
});

And then the HTML code.
<input id="fromDate" type="text" value=""/>
<input id="toDate" type="text" value=""/>

Result:

Make a Comment

You must be logged in to post a comment.