While the datepicker is open, the following key commands are available: For an inline calendar, simply attach the datepicker to a div or span. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.īy default, the datepicker calendar opens in a small overlay when the associated text field gains focus. Screenshots of the above JQuery UI date picker code are shown below.The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. An example usage of JQuery UI datepicker on a HTML page Example usage: $( “.selector” ).datepicker( “show” ) įor complete details about all available options, methods, and functions, visit official JQuery UI date picker documentation. Example usage: $( “.selector” ).datepicker( “hide” ) hide : Closes a previously opened datepicker window.Example usage: $( “.selector” ).datepicker( “setDate”, “” ) setDate(date) : Set the date of datepicker instance.Example usage: var date = $(“.selector”).datepicker( “getDate” ) getDate : Returns the date opted by the user or null if the user selects no date.Example usage: $( “.selector” ).datepicker( “destroy” ) destroy : Removes the current datepicker instance.Function parameters are the input date and datepicker instance. onSelect : call back function, called on selecting the date.Function parameters are the input date and the datepicker instance. onClose : Call back function to call on close of datepicker window.Similarly we can use the minDate to set minimum selectable date. maxDate : This sets the maximum selectable date.defaultDate : Setting the value can be used to highlight particular date.constrainInput : Setting the value to true allows only constrained characters to be used as input.showButtonPanel : Setting the value to true sets shows a ‘close’ button and a ‘today’ button on datepicker window.Similarly, we can use changeYear for year. changeMonth : Setting the value to true will show the month as changeable drop down menu on datepicker window.altField : Input type, which should be updated with datepicker selected value.buttonImageOnly : If we use buttonImage option, we have to set this value to true.Example: Setting the value of this option to ‘ dd-M-yy’ will format the date value to with format like ‘ 1’. dateFormat : Date format settings for the date picker.buttonText : Button text to display on button or text to display on hovering on the datepicker image in case if we use the buttonImage option(alt value of image).We can set the values to ‘focus’, ‘button’, or ‘both’. showOn : To set when the datepicker window should appear.We should set the value as ‘button’ or ‘both’ for showOn option. Option value should be the URL of an image, which needs to be shown. buttonImage : To add an image icon to the button, which opens the calendar on click.The next section shows a few of the options available.Ī few of the useful options and methods of JQuery UI date picker are given below Date picker Options We can modify the date picker settings using the utility function setDefaults(options). We can use this function to set default options for the date picker. Date: Call date picker function using script tagįinally, to make the date picker work, we need to call the javascript function of the JQuery UI function as shown below. The next step is to create an HTML tag and bind the date picker to it, as shown below. In the previous step, we imported the required CSS and js files. Add the required HTML code snippet to plugin the date picker After creating the page, add the following script and CSS file import statements to the header part of the page. Import the required javascript librariesĬreate an HTML/JSP page where we want to add our date picker. We need to create an HTML page, import the required libraries, and add the necessary components.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |