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. Transforms the , , and elements in the wrapped set into a datepicker control. By default, for elements, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a , or element. The options parameter is an object that specifies the behavior and appearance of the datepicker elements. 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. 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. It provides the format for the value to be written to the alternate element. 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. Option - appendText This option is a String value to be placed after the element, intended to show instructions to the user. By default its value is false. By default its value is false. This function can return an options hash used to modify the datepicker. 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. This can be used to override some of the default behavior of the day elements. If buttonText is also provided, the button text becomes the alt attribute of the button. 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. 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. Option - buttonText This option specifies the caption for the button enabled by setting the showOn option to one of button or both. Option - calculateWeek This option is a custom function to calculate and return the week number for a date passed as the lone parameter. 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. 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. It is used when the button panel is displayed via the showButtonPanel option. 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 true. Option - constrainInput This option if set true the default , text entry into the element is constrained to characters allowed by the current dateformat option. By default its value is true. 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. Option - dateFormat This option specifies the date format to be used. Can be used to localize the control. 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. Can be used to localize the control. 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. Can be used to localize the control. 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. 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 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. 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. 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. 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. By default its value is false. By default its value is false. By default its value is false. 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. 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. Can be used to localize the control. 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. Can be used to localize the control. 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. This allows date formats to be supplied for those options that get replaced with the relevant values. By default its value is false. This allows date formats to be supplied for those options that get replaced with the relevant values. By default its value is false. 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. 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. By default its value is null. By default its value is null. 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. 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. 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. 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. By default its value is false. 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. 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. By default its value is show. 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. 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. 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. 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. 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 . 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. 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. 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. 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. 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. Option - yearSuffix This option displays additional text after the year in the datepicker header. Default functionality The following example demonstrates a simple example of datepicker functionality passing no parameters to the datepicker method. Use of appendText, dateFormat, altField and altFormat 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. Use of beforeShowDay The following example shows the usage of option beforeShowDay in the datepicker function of JqueryUI. Use of showOn, buttonImage, and buttonImageOnly The following example shows the usage of three important options a showOn b buttonImage and c buttonImageOnly in the datepicker function of JqueryUI. Use of defaultDate, dayNamesMin, and duration The following example shows the usage of three important options a dayNamesMin b dayNamesMin and c duration in the datepicker function of JqueryUI. You can also see a default date is set. Use of prevText, nextText, showOtherMonths and selectOtherMonths 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. If you click on the element, the datepicker opens. Now in the first datepicker, the other months dates are disable as selectOtherMonths is set false. In the second date picker for second input type, the selectOtherMonths is set to true. Use of changeMonth, changeYear, and numberOfMonths The following example shows the usage of three important options a changeMonth b changeYear and c numberOfMonths in the datepicker function of JqueryUI. Use of showWeek, yearSuffix, and showAnim The following example shows the usage of three important options a showWeek b yearSuffix and c showAnim in the datepicker function of JqueryUI. 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. Basically, here actions are nothing but they are jQuery methods which we can use in the form of string. This will return the element back to its pre-init state. This method does not accept any arguments. The function receives the date text and date picker instance as parameters. If not specified the dialog is centered on the screen. This method does not accept any arguments. Action - option optionName This action retrieves the value currently associated with the specified optionName. This method does not accept any arguments. This method does not accept any arguments. Action - setDate This action sets the specified date as the current date of the datepicker. 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. Action - widget This action returns a jQuery object containing the datepicker. Use of setDate action Now let us see an example using the actions from the above table. The following example demonstrates the use of actions setDate.
