JqueryUI - Datepicker

Datepickers in jQueryUI allow users to enter dates easily and visually. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
jQueryUI provides datepicker() method that creates a datepicker and changes the appearance of HTML elements on a page by adding new CSS classes. Transforms the <input>, <div>, and <span> elements in the wrapped set into a datepicker control. 

The datepicker() method can be used in two forms −
$(selector, context).datepicker (options) Method
$(selector, context).datepicker (options) Method
$(selector, context).datepicker ("action", [params]) Method
$(selector, context).datepicker ("action", [params]) Method
$(selector, context).datepicker(options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −
$(selector, context).datepicker({option1: value1, option2: value2..... });
The following table lists the different options that can be used with this method −
This option specifies a jQuery selector for a field that is also updated with any date selections. The altFormat option can be used to set the format for this value. This is quite useful for setting date values into a hidden input element to be submitted to the server, while displaying a more user-friendly format to the user. By default its value is "".
Option - altField
This option specifies a jQuery selector for a field that is also updated with any date selections. The altFormat option can be used to set the format for this value. This is quite useful for setting date values into a hidden input element to be submitted to the server, while displaying a more user-friendly format to the user. By default its value is "".
Syntax
$(".selector").datepicker(
   { altField: "#actualDate" }
);

This option is used when an altField option is specified. It provides the format for the value to be written to the alternate element. By default its value is "".
Option - altFormat
This option is used when an altField option is specified. It provides the format for the value to be written to the alternate element. By default its value is "".
Syntax
$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);

This option is a String value to be placed after the <input> element, intended to show instructions to the user. By default its value is "".
Option - appendText
This option is a String value to be placed after the <input> element, intended to show instructions to the user. By default its value is "".
Syntax
$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);

This option when set to true resizes the <input> element to accommodate the datepicker’s date format as set with the dateFormat option. By default its value is false.
Option - autoSize
This option when set to true resizes the <input> element to accommodate the datepicker’s date format as set with the dateFormat option. By default its value is false.
Syntax
$(".selector").datepicker(
   { autoSize: true }
);

This option is a callback function that’s invoked just before a datepicker is displayed, with the <input> element and datepicker instance passed as parameters. This function can return an options hash used to modify the datepicker. By default its value is "".
Option - beforeShow
This option is a callback function that’s invoked just before a datepicker is displayed, with the <input> element and datepicker instance passed as parameters. This function can return an options hash used to modify the datepicker. By default its value is "".
This option is a callback function which takes a date as parameter, that’s invoked for each day in the datepicker just before it’s displayed, with the date passed as the only parameter. This can be used to override some of the default behavior of the day elements. This function must return a three-element array.By default its value is null.
Option - beforeShowDay
This option is a callback function which takes a date as parameter, that’s invoked for each day in the datepicker just before it’s displayed, with the date passed as the only parameter. This can be used to override some of the default behavior of the day elements. This function must return a three-element array, as follows −
[0]—true to make the date selectable, false otherwise.
[0]—true to make the date selectable, false otherwise.
[1]—A space-delimited string of CSS class names to be applied or an empty string to apply none
[1]—A space-delimited string of CSS class names to be applied or an empty string to apply none
[2]—An optional string to apply a tooltip to the day element
[2]—An optional string to apply a tooltip to the day element
By default its value is null.
This option specifies the path to an image to be displayed on the button enabled by setting the showOn option to one of buttons or both. If buttonText is also provided, the button text becomes the alt attribute of the button. By default its value is "".
Option - buttonImage
This option specifies the path to an image to be displayed on the button enabled by setting the showOn option to one of buttons or both. If buttonText is also provided, the button text becomes the alt attribute of the button. By default its value is "".
Syntax
$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);

This option if set to true, specifies that the image specified by buttonImage is to appear standalone (not on a button). The showOn option must still be set to one of button or both for the image to appear. By default its value is false.
Option - buttonImageOnly
This option if set to true, specifies that the image specified by buttonImage is to appear standalone (not on a button). The showOn option must still be set to one of button or both for the image to appear. By default its value is false.
Syntax
$(".selector").datepicker(
   { buttonImageOnly: true }
);

This option specifies the caption for the button enabled by setting the showOn option to one of button or both. By default its value is "...".
Option - buttonText
This option specifies the caption for the button enabled by setting the showOn option to one of button or both. By default its value is "...".
Syntax
$(".selector").datepicker(
   { buttonText: "Choose" }
);

This option is a custom function to calculate and return the week number for a date passed as the lone parameter. The default implementation is that provided by the $.datepicker.iso8601Week() utility function.
Option - calculateWeek
This option is a custom function to calculate and return the week number for a date passed as the lone parameter. The default implementation is that provided by the $.datepicker.iso8601Week() utility function.
Syntax
$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);

This option if set to true, a month dropdown is displayed, allowing the user to directly change the month without using the arrow buttons to step through them. By default its value is false.
Option - changeMonth
This option if set to true, a month dropdown is displayed, allowing the user to directly change the month without using the arrow buttons to step through them. By default its value is false.
Syntax
$(".selector").datepicker(
   { changeMonth: true }
);

This option if set to true, a year dropdown is displayed, allowing the user to directly change the year without using the arrow buttons to step through them. Option yearRange can be used to control which years are made available for selection. By default its value is false.
Option - changeYear
This option if set to true, a year dropdown is displayed, allowing the user to directly change the year without using the arrow buttons to step through them. Option yearRange can be used to control which years are made available for selection. By default its value is false.
Syntax
$(".selector").datepicker(
   { changeYear: true }
);

This option specifies the text to replace the default caption of Done for the close button. It is used when the button panel is displayed via the showButtonPanel option. By default its value is "Done".
Option - closeText
This option specifies the text to replace the default caption of Done for the close button. It is used when the button panel is displayed via the showButtonPanel option. By default its value is "Done".
Syntax
$(".selector").datepicker(
   { closeText: "Close" }
);

This option if set true (the default), text entry into the <input> element is constrained to characters allowed by the current dateformat option. By default its value is true.
Option - constrainInput
This option if set true (the default), text entry into the <input> element is constrained to characters allowed by the current dateformat option. By default its value is true.
Syntax
$(".selector").datepicker(
   { constrainInput: false }
);

This option specifies the text to replace the default caption of Today for the current button. This is used if the button panel is displayed via the showButtonPanel option. By default its value is Today.
Option - currentText
This option specifies the text to replace the default caption of Today for the current button. This is used if the button panel is displayed via the showButtonPanel option. By default its value is Today.
Syntax
$(".selector").datepicker(
   { currentText: "Now" }
);

This option specifies the date format to be used. By default its value is mm/dd/yy.
Option - dateFormat
This option specifies the date format to be used. By default its value is mm/dd/yy.
Syntax
$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);

This option is a 7-element array providing the full day names with the 0th element representing Sunday. Can be used to localize the control. By default its value is [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ].
Option - dayNames
This option is a 7-element array providing the full day names with the 0th element representing Sunday. Can be used to localize the control. By default its value is [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ].
Syntax
$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);

This option is a 7-element array providing the minimal day names with the 0th element representing Sunday, used as column headers. Can be used to localize the control. By default its value is [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ].
Option - dayNamesMin
This option is a 7-element array providing the minimal day names with the 0th element representing Sunday, used as column headers. Can be used to localize the control. By default its value is [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ].
Syntax
$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);

This option specifies a 7-element array providing the short day names with the 0th element representing Sunday. Can be used to localize the control. By default its value is [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ].
Option - dayNamesShort
This option specifies a 7-element array providing the short day names with the 0th element representing Sunday. Can be used to localize the control. By default its value is [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ].
Syntax
$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);

This option sets the initial date for the control, overriding the default value of today, if the <input> element has no value. This can be a Date instance, the number of days from today, or a string specifying an absolute or relative date. By default its value is null.
Option - defaultDate
This option sets the initial date for the control, overriding the default value of today, if the <input> element has no value. This can be a Date instance, the number of days from today, or a string specifying an absolute or relative date. By default its value is null.
Syntax
$(".selector").datepicker(
   { defaultDate: +7 }
);

This option specifies the speed of the animation that makes the datepicker appear. Can be one of slow, normal, or fast, or the number of milliseconds for the animation to span. By default its value is normal.
Option - duration
This option specifies the speed of the animation that makes the datepicker appear. Can be one of slow, normal, or fast, or the number of milliseconds for the animation to span. By default its value is normal.
Syntax
$(".selector").datepicker(
   { duration: "slow" }
);

This option specifies which day is considered the first day of the week, and will be displayed as the left-most column. By default its value is 0.
Option - firstDay
This option specifies which day is considered the first day of the week, and will be displayed as the left-most column. By default its value is 0.
Syntax
$(".selector").datepicker(
   { firstDay: 1 }
);

This option when set to true, the current day link is set to the selected date, overriding the default of today. By default its value is false.
Option - gotoCurrent
This option when set to true, the current day link is set to the selected date, overriding the default of today. By default its value is false.
Syntax
$(".selector").datepicker(
   { gotoCurrent: true }
);

This option if set to true, hides the next and previous links (as opposed to merely disabling them) when they aren’t applicable, as determined by the settings of the minDate and maxDate options. By default its value is false.
Option - hideIfNoPrevNext
This option if set to true, hides the next and previous links (as opposed to merely disabling them) when they aren’t applicable, as determined by the settings of the minDate and maxDate options. By default its value is false.
Syntax
$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);

This option when set to true, specifies the localizations as a right-to-left language. By default its value is false.
Option - isRTL
This option when set to true, specifies the localizations as a right-to-left language. By default its value is false.
Syntax
$(".selector").datepicker(
   { isRTL: true }
);

This option sets the maximum selectable date for the control. This can be a Date instance, the number of days from today, or a string specifying an absolute or relative date. By default its value is null.
Option - maxDate
This option sets the maximum selectable date for the control. This can be a Date instance, the number of days from today, or a string specifying an absolute or relative date. By default its value is null.
Syntax
$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);

This option sets the minimum selectable date for the control. This can be a Date instance, the number of days from today, or a string specifying an absolute or relative date. By default its value is null.
Option - minDate
This option sets the minimum selectable date for the control. This can be a Date instance, the number of days from today, or a string specifying an absolute or relative date. By default its value is null.
Syntax
$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);

This option is a 12-element array providing the full month names with the 0th element representing January. Can be used to localize the control. By default its value is [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].
Option - monthNames
This option is a 12-element array providing the full month names with the 0th element representing January. Can be used to localize the control. By default its value is [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].
Syntax
$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);

This option specifies a 12-element array providing the short month names with the 0th element representing January. Can be used to localize the control. By default its value is [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ].
Option - monthNamesShort
This option specifies a 12-element array providing the short month names with the 0th element representing January. Can be used to localize the control. By default its value is [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ].
Syntax
$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);

This option if set to true, the navigation links for nextText, prevText, and currentText are passed through the 
$.datepicker.formatDate() function prior to display. This allows date formats to be supplied for those options that get replaced with the relevant values. By default its value is false.
Option - navigationAsDateFormat
This option if set to true, the navigation links for nextText, prevText, and currentText are passed through the 
$.datepicker.formatDate() function prior to display. This allows date formats to be supplied for those options that get replaced with the relevant values. By default its value is false.
Syntax
$(".selector").datepicker(
   { navigationAsDateFormat: true }
);

This option specifies the text to replace the default caption of Next for the next month navigation link. ThemeRoller replaces this text with an icon. By default its value is Next.
Option - nextText
This option specifies the text to replace the default caption of Next for the next month navigation link. ThemeRoller replaces this text with an icon. By default its value is Next.
Syntax
$(".selector").datepicker(
   {  nextText: "Later" }
);

This option specifies the number of months to show in the datepicker. By default its value is 1.
Option - numberOfMonths
This option specifies the number of months to show in the datepicker. By default its value is 1. Multiple types supported −
Number − The number of months to display in a single row.
Number − The number of months to display in a single row.
Array − An array defining the number of rows and columns to display.
Array − An array defining the number of rows and columns to display.
Syntax
$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);

This option is a callback that’s invoked when the datepicker moves to a new month or year, with the selected year, month (1-based), and datepicker instance passed as parameters, and the function context is set to the input field element. By default its value is null.
Option - onChangeMonthYear
This option is a callback that’s invoked when the datepicker moves to a new month or year, with the selected year, month (1-based), and datepicker instance passed as parameters, and the function context is set to the input field element. By default its value is null.
This option is a callback invoked whenever a datepicker is closed, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null.
Option - onClose
This option is a callback invoked whenever a datepicker is closed, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null.
This option is a callback invoked whenever a date is selected, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null.
Option - onSelect
This option is a callback invoked whenever a date is selected, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null.
This option specifies the text to replace the default caption of Prev for the previous month navigation link. (Note that the ThemeRoller replaces this text with an icon). By default its value is PrevdefaultDatedayNamesMin.
Option - prevText
This option specifies the text to replace the default caption of Prev for the previous month navigation link. (Note that the ThemeRoller replaces this text with an icon). By default its value is Prev.
Syntax
$(".selector").datepicker(
   { prevText: "Earlier" }
);

This option if set to true, days shown before or after the displayed month(s) are selectable. Such days aren’t displayed unless the showOtherMonths option is true. By default its value is false.
Option - selectOtherMonths
This option if set to true, days shown before or after the displayed month(s) are selectable. Such days aren’t displayed unless the showOtherMonths option is true. By default its value is false.
Syntax
$(".selector").datepicker(
   { selectOtherMonths: true }
);

This option if its a number, specifies a value between 0 and 99 years before which any 2-digit year values will be considered to belong to the previous century. If this option is a string, the value undergoes a numeric conversion and is added to the current year. 
The default is +10 which represents 10 years from the current year.
Option - shortYearCutoff
This option if its a number, specifies a value between 0 and 99 years before which any 2-digit year values will be considered to belong to the previous century. If this option is a string, the value undergoes a numeric conversion and is added to the current year. 
The default is +10 which represents 10 years from the current year.
Syntax
$(".selector").datepicker(
   { shortYearCutoff: 50 }
);

This option specifies sets the name of the animation to be used to show and hide the datepicker. If specified, must be one of show (the default), fadeIn, slideDown, or any of the jQuery UI show/hide animations. By default its value is show.
Option - showAnim
This option specifies sets the name of the animation to be used to show and hide the datepicker. If specified, must be one of show (the default), fadeIn, slideDown, or any of the jQuery UI show/hide animations. By default its value is show.
Syntax
$(".selector").datepicker(
   { showAnim: "fold" }
);

This option if set to true, a button panel at the bottom of the datepicker is displayed, containing current and close buttons. The caption of these buttons can be provided via the currentText and closeText options. By default its value is false.
Option - showButtonPanel
This option if set to true, a button panel at the bottom of the datepicker is displayed, containing current and close buttons. The caption of these buttons can be provided via the currentText and closeText options. By default its value is false.
Syntax
$(".selector").datepicker(
   { showButtonPanel: true }
);

This option specifies the 0-based index, starting at the upper left, of where the month containing the current date should be placed within a multi-month display. By default its value is 0.
Option - showCurrentAtPos
This option specifies the 0-based index, starting at the upper left, of where the month containing the current date should be placed within a multi-month display. By default its value is 0.
Syntax
$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);

This option specifies if set to true, the positions of the month and year are reversed in the header of the datepicker. By default its value is false.
Option - showMonthAfterYear
This option specifies if set to true, the positions of the month and year are reversed in the header of the datepicker. By default its value is false.
Syntax
$(".selector").datepicker(
   { showMonthAfterYear: true }
);

This option specifies when the datepicker should appear. The possible values are focus, button or both. By default its value is focus.
Option - showOn
This option specifies when the datepicker should appear. The possible values are focus, button or both. By default its value is focus.
focus (default) causes the datepicker to display when the <input> element gains focus.
button  causes a button to be created after the <input> element (but before any appended text) that triggers the datepicker when clicked.
both causes the trigger button to be created, and for focus events to also trigger the datepicker.
Syntax
$(".selector").datepicker(
   { showOn: "both" }
);

This option provides a hash to be passed to the animation when a jQuery UI animation is specified for the showAnim option. By default its value is {}.
Option - showOptions
This option provides a hash to be passed to the animation when a jQuery UI animation is specified for the showAnim option. By default its value is {}.
Syntax
$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);

This option if set to true, dates before or after the first and last days of the current month are displayed. These dates aren't selectable unless the selectOtherMonths option is also set to true. By default its value is false.
Option - showOtherMonths
This option if set to true, dates before or after the first and last days of the current month are displayed. These dates aren't selectable unless the selectOtherMonths option is also set to true. By default its value is false.
Syntax
$(".selector").datepicker(
   { showOtherMonths: true }
);

This option if set to true, the week number is displayed in a column to the left of the month display. The calculateWeek option can be used to alter the manner in which this value is determined. By default its value is false.
Option - showWeek
This option if set to true, the week number is displayed in a column to the left of the month display. The calculateWeek option can be used to alter the manner in which this value is determined. By default its value is false.
Syntax
$(".selector").datepicker(
   { showWeek: true }
);

This option specifies specifies how many months to move when one of the month navigation controls is clicked. By default its value is 1.
Option - stepMonths
This option specifies specifies how many months to move when one of the month navigation controls is clicked. By default its value is 1.
Syntax
$(".selector").datepicker(
   { stepMonths: 3 }
);

This option specifies the text to display for the week number column, overriding the default value of Wk, when showWeek is true. By default its value is Wk.
Option - weekHeader
This option specifies the text to display for the week number column, overriding the default value of Wk, when showWeek is true. By default its value is Wk.
Syntax
$(".selector").datepicker(
   { weekHeader: "W" }
);

This option specifies limits on which years are displayed in the dropdown in the form from:to when changeYear is true. The values can be absolute or relative (for example: 2005:+2, for 2005 through 2 years from now). The prefix c can be used to make relative values offset from the selected year rather than the current year (example: c-2:c+3). By default its value is c-10:c+10.
Option - yearRange
This option specifies limits on which years are displayed in the dropdown in the form from:to when changeYear is true. The values can be absolute or relative (for example: 2005:+2, for 2005 through 2 years from now). The prefix c can be used to make relative values offset from the selected year rather than the current year (example: c-2:c+3). By default its value is c-10:c+10.
Syntax
$(".selector").datepicker(
   { yearRange: "2002:2012" }
);

This option displays additional text after the year in the datepicker header. By default its value is "".
Option - yearSuffix
This option displays additional text after the year in the datepicker header. By default its value is "".
Syntax
$(".selector").datepicker(
   { yearSuffix: "CE" }
);

The following section will show you a few working examples of datepicker functionality.
The following example demonstrates a simple example of datepicker functionality passing no parameters to the datepicker() method.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Enter Date: 
The following example demonstrates a simple example of inline datepicker functionality.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
In the above example we use <div> element to get the inline date picker.
The following example shows the usage of three important options (a) appendText (b) dateFormat (c) altField  and (d) altFormat in the datepicker function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Enter Date: (yy-mm-dd)
Alternate Date: 
In the above example, you can see that the date formate for first input is set as yy-mm-dd. If you select some date from datepicker the same date is reflected in the second input field whose date format is set as "DD, d MM, yy".
The following example shows the usage of option beforeShowDay in the datepicker function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-5" ).datepicker({
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Enter Date: 
In the above example sunday and saturday are disabled.
The following example shows the usage of three important options (a) showOn (b) buttonImage and (c) buttonImageOnly in the datepicker function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-6" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Enter Date: 
In the above example an icon is displayed which needs to b clicked to open the datepicker.
The following example shows the usage of three important options (a) dayNamesMin (b) dayNamesMin and (c) duration in the datepicker function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-7" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
               duration: "slow"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Enter Date: 
In the above example the names of the days are changed using dayNamesMin. You can also see a default date is set.
The following example shows the usage of three important options (a) prevText (b) nextText (c) showOtherMonths  and (d) selectOtherMonths in the datepicker function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      
      <script>
         $(function() {
            $( "#datepicker-8" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: false
            });
            $( "#datepicker-9" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
      <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Enter Start Date: 
Enter End Date: 
In the above example the prev and nect links have captions. If you click on the element, the datepicker opens. Now in the first datepicker, the other months dates are disable as selectOtherMonths is setfalse. In the second date picker for second input type, the selectOtherMonths is set totrue.
The following example shows the usage of three important options (a) changeMonth (b) changeYear and (c) numberOfMonths in the datepicker function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-10" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[2,2]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Enter Date: 
In the above example, you can see dropdown menus for Month and Year fields. And we are dispalying 4 months in an array structure of [2,2].
The following example shows the usage of three important options (a) showWeek (b) yearSuffix and (c) showAnim in the datepicker function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "slide"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Enter Date: 
In the above example, you can see that week numbers are displayed on the left side of datepicker as showWeek is set to true. The year is have a suffix of "-CE".
The datepicker (action, params) method can perform an action on the calendar, such as such as selecting a new date. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action.
$(selector, context).datepicker ("action", [params]);

The following table lists the actions for this method −
This action removes the datepicker functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
Action - destroy()
This action removes the datepicker functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
Syntax
$(".selector").datepicker("destroy");

This action displays datepicker in a jQuery UI dialog box.
Action - dialog( date [, onSelect ] [, settings ] [, pos ] )
This action displays datepicker in a jQuery UI dialog box . Where  −
date is the initial date.
date is the initial date.
onSelect is a callback function when a date is selected. The function receives the date text and date picker instance as parameters.
onSelect is a callback function when a date is selected. The function receives the date text and date picker instance as parameters.
settings is the new settings for the date picker.
settings is the new settings for the date picker.
pos is the position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.
pos is the position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.
Syntax
$(".selector").datepicker( "dialog", "10/12/2012" );

This action returns the Date corresponding to the selected date. This method does not accept any arguments.
Action - getDate()
This action returns the Date corresponding to the selected date. This method does not accept any arguments.
Syntax
$(".selector").datepicker("getDate");

This action closes the previously opened date picker. This method does not accept any arguments.
Action - hide()
This action closes the previously opened date picker. This method does not accept any arguments.
Syntax
$(".selector").datepicker("hide");

This action checks if the date picker funcitonality is disabled. This method does not accept any arguments.
Action - isDisabled()
This action checks if the date picker funcitonality is disabled. This method does not accept any arguments.
Syntax
$(".selector").datepicker("isDisabled");

This action retrieves the value currently associated with the specified optionName.
Action - option( optionName )
This action retrieves the value currently associated with the specified optionName.
Syntax
$(".selector").datepicker( "option", "disabled");

This action gets an object containing key/value pairs representing the current datepicker options hash. This method does not accept any arguments.
Action - option()
This action gets an object containing key/value pairs representing the current datepicker options hash. This method does not accept any arguments.
Syntax
var options = $( ".selector" ).datepicker( "option" );

This action sets the value of the datepicker option associated with the specified optionName.
Action - option( optionName, value )
This action sets the value of the datepicker option associated with the specified optionName.
Syntax
$(".selector").datepicker( "option", "disabled", true );

This action sets one or more options for the datepicker.
Action - option( options )
This action sets one or more options for the datepicker.
Syntax
$(".selector").datepicker("option", { disabled: true });

This action redraws the date picker, after having made some external modifications. This method does not accept any arguments.
Action - refresh()
This action redraws the date picker, after having made some external modifications. This method does not accept any arguments.
Syntax
$(".selector").datepicker("refresh");

This action sets the specified date as the current date of the datepicker.
Action - setDate()
This action sets the specified date as the current date of the datepicker.
Syntax
$(".selector").datepicker("setDate", "10/12/2012");

This action opens the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown. This method does not accept any arguments.
Action - show()
This action opens the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown. This method does not accept any arguments.
Syntax
$(".selector").datepicker("show");

This action returns a jQuery object containing the datepicker.
Action - widget()
This action returns a jQuery object containing the datepicker.
Syntax
$(".selector").datepicker("widget");

The following examples show the use of some of the actions listed in the above table.
Now let us see an example using the actions from the above table. The following example demonstrates the use of actions setDate.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output −
Enter Date: 
The following example demonstrates the use of action show.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker();
            $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output −
Enter Date: 
There are no datepicker event methods as of now!
 Print
 Add Notes
 Bookmark this page