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="//"></script>
<script src="//"></script>
for css:
<link href='' 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:

2. Use datepicker by calling class

HTML source code
<input type="text" class="basic_datepicker_name"/>
Using jquery date picker by class:

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" />
    minDate: new Date('2013-09-01'),
    maxDate: new Date('2013-10-01')

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.
    minDate: 0,
    maxDate: '+1M +1W +10D'

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
We will try to highlight tomorrows and next 7 days of today.
var today = new Date();
var tomorrows = new Date(today.getFullYear(), 
 var next7days = new Date(today.getFullYear(),
 var highlights = new Array(tomorrows, next7days);

    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'];
        return [true, '',''];

And click to see the result  Post status : updating