I have received many requests from my readers to write about jQuery date picker and I like date picker of Google Analytic and going to explain you how it works and complete tutorial with source code and live example where you can check its scenario. Its a jQuery plugin i have used to create this date picker which accepting single, range, and multiple selected dates.

jQuery libraries you need include

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
<script type="text/javascript" src="js/DateRange.js"></script>

<script type="text/javascript">
            $(document).ready(function() {
                $(\'.pickerContainer.basic\').DatePicker({mode:"single", date: new Date(), inline: true});
                $(\'.pickerContainer.range\').DatePicker({mode:"range", date: [\'2012-11-01\', new Date()], inline: true, calendars: 2});
            });
</script>

HTML and css required to design calendars:

<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/example.css" />

<div id="container">
<div class="item">
<h2>Single DatePicker</h2>
<div class="pickerContainer basic"></div>
</div>
<div class="item">
<h2>Basic DatePicker</h2>
<div class="pickerContainer range"></div>
</div>
</div>

Hope you understand and learn about date picker if any confusion please feel free to comment.