Search within TutorialsPark

jQuery UI : Datepicker - Methods


Learn how to use jQuery UI datepicker Widget Supports a number of Methods


jQuery UI : DatePicker Widget - Methods

The jQuery UI DatePicker Widget provides options to set the appearance of the datepicker , datepicker widget comes inbuilt with the default appearance. But users can finetune the appearance to suit the requirements of the project.


Table : jQuery UI Basic Appearance Settings

Methods Description
datepicker("destroy") To remove the Datepicker from the underlying Element.
datepicker("disable") To disable the datepicker.
datepicker("enable") To Enable the datepicker.
datepicker("options") To Set one or more options for the datepicker.
datepicker("isDisabled") To return true if the datepicker is disabled.
datepicker("show") To allow days in previous or following month which are then shown on the current month panel
datepicker("refresh") To refresh a datepicker to reflect the changes in the underlying Element.
datepicker("getDate") To get the selected Date from the Datepicker.
datepicker("setDate", "date") To Set the Selected Date from the Date picker.

jQuery UI DatePicker : Get and Set the Date using Methods

jQuery UI Datepicker method getDate and setDate are used to get and set date using Datepickers, with a specified Date range.

In the demo below, the second datepicker is disabled when the document is loaded intitially, the event onSelect is invoked when a date is selected.

Example: jQuery UI DatePicker- Get and Set Date using Methods

Give it a TRY! » Note: Based on dates selected from both the datepickers, the difference between both the dates is displayed.


jQuery UI DatePicker : Show and Hide using Methods

jQuery UI DatePicker Widget's display on the screen can be controlled dynamically using methods of show and hide.

In the demo, the datepicker method of show is called when the button is clicked, the function setTimeOut is used to close the datepicker pop-up after an Interval of 1Sec

Example: jQuery UI DatePicker - show and hide using Methods

Give it a TRY! » Note: This method is useful to hide Datepicker after some time