JqueryUI Datepicker - JqueryUI

How to use Datepicker in JqueryUI?

With jQueryUI's Datepickers, you can visually enter dates. You can customize the date format and language, limit the selectable date range, and easily add buttons and other navigation options.

jQueryUI provides a datepicker() method to modify the appearance of HTML elements on a page by creating a date stamp and adding a new CSS class. Converts the <input>, <div>, and <span> elements of the wrapper to the date picker control.

Syntax

The datepicker() method can be used in two forms:

  • $(selector, context).datepicker (options) Method
  • $(selector, context).datepicker ("action", [params]) Method

$ (selector, context).datepicker (options) Method

The datepicker (options) method declares an <input> element (<div> or <span> depending on how the calendar is displayed) that is managed as a date stamp. The options parameter is an object that specifies the behavior and appearance of the datepicker element.

Syntax

The Javascript objects used to specify multiple options at once. If more than one option is specified, separate them with commas, as shown below

The following table lists teh different options used in this method:

Sr.No. Option & Description
1 altField
This option specifies a jQuery selector for a field that is also updated with any date selections. ThealtFormatoption 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"".
2 altFormat
This option is used when analtFieldoption is specified. It provides the format for the value to be written to the alternate element. By default its value is"".
3 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"".
4 autoSize
This option when set totrueresizes the <input> element to accommodate the datepicker’s date format as set with the dateFormat option. By default its value isfalse.
5 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"".
6 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.By default its value isnull.
7 buttonImage
This option specifies the path to an image to be displayed on the button enabled by setting theshowOnoption to one of buttons or both. IfbuttonTextis also provided, the button text becomes thealtattribute of the button. By default its value is"".
8 buttonImageOnly
This option if set totrue, 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 isfalse.
9 buttonText
This option specifies the caption for the button enabled by setting theshowOnoption to one ofbuttonorboth. By default its value is"...".
10 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.
11 changeMonth
This option if set totrue, 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 isfalse.
12 changeYear
This option if set totrue, a year dropdown is displayed, allowing the user to directly change the year without using the arrow buttons to step through them. OptionyearRangecan be used to control which years are made available for selection. By default its value isfalse.
13 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 theshowButtonPaneloption. By default its value is"Done".
14 constrainInput
This option if settrue(the default), text entry into the <input> element is constrained to characters allowed by the currentdateformatoption. By default its value istrue.
15 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 theshowButtonPaneloption. By default its value isToday.
16 dateFormat
This option specifies the date format to be used. By default its value ismm/dd/yy.
17 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" ].
18 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" ].
19 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" ].
20 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 aDateinstance, thenumberof days from today, or astringspecifying an absolute or relative date. By default its value isnull.
21 duration
This option specifies the speed of the animation that makes the datepicker appear. Can be one ofslow, normal, or fast,or the number of milliseconds for the animation to span. By default its value isnormal.
22 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 is0.
23 gotoCurrent
This option when set totrue, the current day link is set to the selected date, overriding the default of today. By default its value isfalse.
24 hideIfNoPrevNext
This option if set totrue, hides the next and previous links (as opposed to merely disabling them) when they aren’t applicable, as determined by the settings of theminDateandmaxDateoptions. By default its value isfalse.
25 isRTL
This option when set totrue, specifies the localizations as a right-to-left language. By default its value isfalse.
26 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 isnull.
27 minDate
This option sets the minimum selectable date for the control. This can be aDateinstance, thenumberof days from today, or astringspecifying an absolute or relative date. By default its value isnull.
28 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" ].
29 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" ].
30 navigationAsDateFormat
This option if set totrue, the navigation links fornextText, prevText,andcurrentTextare 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 isfalse.
31 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 isNext.
32 numberOfMonths
This option specifies the number of months to show in the datepicker. By default its value is1.
33 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 isnull.
34 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 isnull.
35 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 isnull.
36 prevText
This option specifies the text to replace the default caption ofPrevfor the previous month navigation link. (Note that the ThemeRoller replaces this text with an icon). By default its value isPrevdefaultDatedayNamesMin.
37 selectOtherMonths
This option if set totrue, days shown before or after the displayed month(s) are selectable. Such days aren’t displayed unless theshowOtherMonthsoption is true. By default its value isfalse.
38 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+10which represents 10 years from the current year.
39 showAnim
This option specifies sets the name of the animation to be used to show and hide the datepicker. If specified, must be one ofshow (the default), fadeIn, slideDown,or any of the jQuery UI show/hide animations. By default its value isshow.
40 showButtonPanel
This option if set totrue, 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 thecurrentTextandcloseTextoptions. By default its value isfalse.
41 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 is0.
42 showMonthAfterYear
This option specifies if set totrue, the positions of the month and year are reversed in the header of the datepicker. By default its value isfalse.
43 showOn
This option specifies when the datepicker should appear. The possible values arefocus, button or both. By default its value isfocus.
44 showOptions
This option provides a hash to be passed to the animation when a jQuery UI animation is specified for theshowAnimoption. By default its value is{}.
45 showOtherMonths
This option if set totrue, 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 isfalse.
46 showWeek
This option if set totrue, 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 isfalse.
47 stepMonths
This option specifies specifies how many months to move when one of the month navigation controls is clicked. By default its value is1.
48 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 isWk.
49 yearRange
This option specifies limits on which years are displayed in the dropdown in the formfrom:towhenchangeYearistrue. 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 isc-10:c+10.
50 yearSuffix
This option displays additional text after the year in the datepicker header. By default its value is"".

Default functionality

The following example shows a simple example of passing a datepicker() method with no parameters to the datepicker function.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

Inline Datepicker

The following example shows an example of a simple inline date stamp function.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

In the above example we use <div> element to get the inline date picker.

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.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

In the example above, you can see that the official entry for the first entry is set to yy - mm - dd. If you select a date from datepicker, it will be reflected in the second input field with the same date set to "DD, d MM, yy".

Use of beforeShowDay

The following example shows the usage of option beforeShowDay in the datepicker function of JqueryUI.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

In the above example sunday and saturday are disabled.

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.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:


In the above example, the icon is displayed, and b is required to click the start date stamp.

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.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

In the example above, use dayNamesMin to change the name of the day. You can also check the setting default date.

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.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

In the example above, there is a subtitle in the link to prev and nect. Click the element to open the date picker. Now in the first date picker, selectOtherMonths is setfalse so the other month's date will be disabled. In the second date selector for the second input type, the Date for Selected Month 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.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

In the example above, the drop-down menu for the month and year fields is displayed. We show 4 months in the array structure of [2,2].

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.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

In the example above, you can see the number of weeks displayed to the left of datepicker by setting showWeek to true. This year I have the suffix "-CE".

$ (selector, context).datepicker ("action", [params]) Method

The datepicker (action, params) method can perform actions on the calendar, such as selecting a new date. This action is specified as a string in the first argument, and one or more params can be selectively provided according to the specified action.

Syntax

The following table lists the actions for this method:

Sr.No. Action & Description
1 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.
2 dialog( date [, onSelect ] [, settings ] [, pos ] )
This action displays datepicker in a jQuery UI dialog box.
3 getDate()
This action returns the Date corresponding to the selected date. This method does not accept any arguments.
4 hide()
This action closes the previously opened date picker. This method does not accept any arguments.
5 isDisabled()
This action checks if the date picker funcitonality is disabled. This method does not accept any arguments.
6 option( optionName )
This action retrieves the value currently associated with the specifiedoptionName.
7 option()
This action gets an object containing key/value pairs representing the current datepicker options hash. This method does not accept any arguments.
8 option( optionName, value )
This action sets the value of the datepicker option associated with the specified optionName.
9 option( options )
This action sets one or more options for the datepicker.
10 refresh()
This action redraws the date picker, after having made some external modifications. This method does not accept any arguments.
11 setDate( date )
This action sets the specified date as the current date of the datepicker.
12 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.
13 widget()
This action returns a jQuery object containing the datepicker.

Use of setDate() action

Let's look at an example of using the actions in the table above. The following example shows the use of setDate actions.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

Use of show() action

The following example demonstrates the use of action show.

Save the above code in the HTML file datepickerexample.htm and open it with a standard browser that supports javascript. You also need to display the following output:

Event Management on datepicker elements

There are no datepicker event methods as of now!

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

JqueryUI Topics