jquery datepicker

Jquery datepicker is a powerful calendar ,that can be used in place of ajax calendar or others.Here are some useful features of jquery datepicker.

How to add jquery datepicker in textbox:

  $(document).ready(function () {

        $('#textboxDate').datepicker({

                            dateFormat: "dd/mm/yy",

                           changeMonth: true,

                           changeYear: true,

                           showOtherMonths: false,

                           onChangeMonthYear: callyourfunction,

                           beforeShowDay:myfunction,
showButtonPanel: true,
numberOfMonths: 2,

                           onSelect: function (dateText, inst) {

                             myfunction(dateText);

                     

                             }

                   });        

    });

• To set the dateformat in datepicker use:   dateFormat: "dd/mm/yy",

1. mm/dd/yy (default)
2. yy-mm-dd"(ISO 8601 - yy-mm-dd)
3. d M, y"(Short - d M, y)
4. d MM, y"(Medium - d MM, y)
5. DD, d MM, yy"(Full - DD, d MM, yy)
6. "'day' d 'of' MM 'in the year' yy"(With text - 'day' d 'of' MM 'in the year' yy)

• To enable the selection of month,year use: changeMonth: true, changeYear: true
  

• To do some action before day print in calendar call event  beforeShowDay,in your function you will be able to get current date month year one by one -1,2,3 etc

          e.g  beforeShowDay:myfunction

          function   myfunction(date)
                 {
                    alert (date);
                  }

• on selection of date  call an event  onSelect  to check some date validation,call your javascript function like 

        function myFunction(date)
            {

                  alert(date)/* selected date by users/*

                }

• on change other month or year if required some action use :onChangeMonthYear
• showButtonPanel: true, to show the button in the bottom of calendar

• To Dislpay multiple months use numberOfMonths: 3(number of month),

• $("#txtCalender").datepicker("refresh") : to Refresh/rebinding the calender

Happy coding