How to use Jquery UI date picker on HTML and JSP

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Creating the datepicker component

We need to create an HTML page, import the required libraries, and add the necessary components.

Import the required javascript libraries

Create an HTML/JSP page where we want to add our date picker. After creating the page, add the following script and CSS file import statements to the header part of the page.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src=https://code.jquery.com/jquery-1.12.4.js></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Add the required HTML code snippet to plugin the date picker

In the previous step, we imported the required CSS and js files. The next step is to create an HTML tag and bind the date picker to it, as shown below.

<p>Date: <input type="text" id="datepicker"></p>

Call date picker function using script tag

Finally, to make the date picker work, we need to call the javascript function of the JQuery UI function as shown below.

<script>
  $(function() {
    $("#datepicker").datepicker();
</script>

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.

The next section shows a few of the options available.

Example:

$.datepicker.setDefaults({
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "calender.gif",
        buttonText: "Calendar"
A few of the useful options and methods of JQuery UI date picker are given below
Date picker Options
buttonImage : To add an image icon to the button, which opens the calendar on click. Option value should be the URL of an image, which needs to be shown. We should set the value as ‘button’ or ‘both’ for showOn option.
showOn : To set when the datepicker window should appear. We can set the values to ‘focus’, ‘button’, or ‘both’.
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).
dateFormat : Date format settings for the date picker. Example: Setting the value of this option to ‘dd-M-yy’ will format the date value to with format like ‘18-Oct-2018’.
buttonImageOnly : If we use buttonImage option, we have to set this value to true.

altField : Input type, which should be updated with datepicker selected value. Set element id or class as option value.
changeMonth : Setting the value to true will show the month as changeable drop down menu on datepicker window. Similarly, we can use changeYear for year.
showButtonPanel : Setting the value to true sets shows a ‘close’ button and a ‘today’ button on datepicker window.
constrainInput : Setting the value to true allows only constrained characters to be used as input.
defaultDate : Setting the value can be used to highlight particular date. Example values : +3, “3d”, “1m”, etc.
maxDate : This sets the maximum selectable date. Example values : +3, “5d”, “1m”, etc. Similarly we can use the minDate to set minimum selectable date.
onClose : Call back function to call on close of datepicker window. Function parameters are the input date and the datepicker instance.
onSelect : call back function, called on selecting the date. Function parameters are the input  date and datepicker instance.
Date picker methods
destroy : Removes the current datepicker instance. Example usage: $( “.selector” ).datepicker( “destroy” );
getDate : Returns the date opted by the user or null if the user selects no date. Example usage: var date = $(“.selector”).datepicker( “getDate” );
setDate(date) : Set the date of datepicker instance. Example usage: $( “.selector” ).datepicker( “setDate”, “15/12/2018” );
hide : Closes a previously opened datepicker window. Example usage: $( “.selector” ).datepicker( “hide” );

show : Show jquery UI datepicker. Example usage: $( “.selector” ).datepicker( “show” );
For complete details about all available options, methods, and functions, visit official JQuery UI date picker documentation.
An example usage of JQuery UI datepicker on a HTML page
<!doctype html>
<html lang="en">
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   </head>
      <p>Date: < input type="text" id="datepicker"></p>
      <h4 id="selectedDtaeVal"></h4>
      <script>
         $(function() {
             $.datepicker.setDefaults({
                 onClose:function(date, inst){
                     $("#selectedDtaeVal").html(date);
             $( "#datepicker" ).datepicker();
      </script>
   </body>
</html>
Screenshots of the above JQuery UI date picker code are shown below.
In this article, we learned how to create a date picker component using the JQuery UI date picker library.
	Related

Table of Contents

Creating the datepicker component

Import the required javascript libraries

Add the required HTML code snippet to plugin the date picker

Call date picker function using script tag

Date picker Options

Date picker methods

An example usage of JQuery UI datepicker on a HTML page

Related