DateTimePicker

Date:

Source Code:

Javascript:
      jQuery(document).ready(function(){
         jQuery("#date_time") .datetimepicker();
      });

Html:
     <input type='text' id='date_time' name='date_time'></input>
      

Default Date and Time

Date:

Source Code:

Javascript:
      jQuery(document).ready(function(){
         jQuery("#date_time_default") .datetimepicker({
                defaultDate : new Date(2012,08,01),
                hour : 8,
                minute : 30,
                ampm : 'PM'
         });
      });

Html:
     <input type='text' id='date_time_default' name='date_time_default'></input>
      

DatePicking

Date:

Source Code:

Javascript:
      jQuery(document).ready(function(){
         jQuery("#date") .datetimepicker({
                timepicker: false,
                dateFormat : 'mm/dd/yyyy'
          });
      });

Html:
     <input type='text' id='date' name='date'></input>
      

Focus on image/ Element /button


Click the icon next to the input field to show the datepicker.
Date:

Source Code:

Javascript:
      jQuery(document).ready(function(){
         jQuery("#date_image").datetimepicker({
                buttonImage :  '/calender.gif',
                showOn : 'button',
                buttonImageOnly : true,
                buttonText: 'Calendar'
          });
      });

Html:
     <input type='text' id='date_image' name='date_image'></input>
      

Restrict Date range

Date:

Source Code:

Javascript:
      jQuery(document).ready(function(){
         jQuery("#date_range").datetimepicker({
                minDate: new Date(2012, 06, 21),
                maxDate: new Date(2012, 11, 21)
          });
      });
Here  month starts from 00-11 and format is new Date(year, month, day)

Html:
     <input type='text' id='date_range' name='date_range'></input>
      

Localized Month/Day labels

   Datepicker with Spanish labels

Date:

Source Code:

Javascript:
      jQuery(document).ready(function(){
         jQuery("#date_local").datetimepicker({
               dayNamesMin: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
         });
      });

Html:
     <input type='text' id='date_local' name='date_local'></input>
      

Change Month and Year

Date:

Source Code:

Javascript:
      jQuery(document).ready(function(){
         jQuery("#date_change").datetimepicker({
                changeMonth: true,
                changeYear: true
         });
      });

Html:
     <input type='text' id='date_change' name='date_change'></input>
      

Display Multiple Months

Date:

Source Code:

Javascript:
      jQuery(document).ready(function(){
         jQuery("#multiple_month").datetimepicker({
                numberOfMonths: 3,
                showButtonPanel: true
         });
      });

Html:
     <input type='text' id='multiple_month' name='multiple_month'></input>
      

Show Week Of the Year

Date:

Source Code:

Javascript:
      jQuery(document).ready(function(){
         jQuery("#date_week").datetimepicker({
                showWeek: true,
                firstDay: 1
         });
      });

Html:
     <input type='text' id='date_week' name='date_week'></input>
      

Use DateTimePicker


Add the downloaded js file, css file and images folder in your project.