In this entry I try to collect some examples in using Jquery date picker to help newbies quick familiar with this plugin, and give some solutions for specific purposes.
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
To run date picker we need to include jquery and jquery-ui in HTML page. You can try them by using google library. Place the following code in your HTML page (in header or before tag is also okay)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
for css:
<link href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' rel='stylesheet' type='text/css'/>

I. Basic using of Jquery date picker

- Assume that you have an input text with id="basic_datepicker" or have class="basic_datepicker_name", you can use date picker for that input text by jquery selector.

1. Firstly, use datepicker by calling id

HTML source code 
<input type="text" id="basic_datepicker"/>
Using jquery date picker by id: 
$('#basic_datepicker').datepicker();
Result:

2. Use datepicker by calling class

HTML source code 
<input type="text" class="basic_datepicker_name"/>
Using jquery date picker by class: 
$('.basic_datepicker_name').datepicker();
Result:

3. Restrict date rage : minDate and maxDate option

Restrict the range of selectable dates with the minDate and maxDate options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.
3.1 setting minDate and maxDate by actual dates
HTML source code: 
<input id="daterange_actualdate" type="text" />

$('#daterange_actualdate').datepicker({
    minDate: new Date('2013-09-01'),
    maxDate: new Date('2013-10-01')
});
Result:

3.2 Setting minDate and maxDate by offset

 HTML source code: 
<input id="daterange_offset" type="text" />
For example, i will set minDate =0 means : selectable date from today and max Date= means:'+1M +1W +10D' selectable date to next 1 month 1 week 10 days. 
$('#daterange_offset').datepicker({
    minDate: 0,
    maxDate: '+1M +1W +10D'
});
Result:

II.Highlight dates in jquery UI datepicker

Using beforeShowDay function. Take a look at document:
beforeShowDay The function takes a date as a parameter and must return an array with
  • [0] equal to true/false indicating whether or not this date is selectable,
  • [1] equal to a CSS class name(s) or '' for the default presentation,
    • and
  • [2] an optional popup tooltip for this date.
It is called for each day in the datepicker before it is displayed.

Let's try to highlight some date in an array first.

I have a css class, which is used for highlight a date 
  .highlighter{
        background:yellow;
  }
We will try to highlight tomorrows and next 7 days of today. 
var today = new Date();
var tomorrows = new Date(today.getFullYear(), 
                         today.getMonth(), 
                         today.getDate()+1).getTime();
 var next7days = new Date(today.getFullYear(),
                         today.getMonth(),
                         today.getDate()+7).getTime();
 var highlights = new Array(tomorrows, next7days);

 $('#highlight_array').datepicker({
    beforeShowDay: function(date) {
      // check if date is in your array of dates
      if($.inArray(date.getTime(), highlights) !=-1) {
         // if it is return the following.
         return [true, 'highlighter', 'this is highlight date'];
      }
      else 
        return [true, '',''];
   }
});
And click to see the result  Post status : updating