Javascript JQuery

How to use Jquery UI date picker on HTML and JSP

An article about how to use JQuery UI date picker and available options, events and methods for the date picker element.

JQuery UI is a JQuery plugin, which we can use to create a rich UI experience with many built-in UI features. We can create a date picker easily using this simple, easy-to-use JQuery plugin. With JQuery UI date picker, we can also customize the date picker with the date format, restrict the date ranges, and other options very easily.

In this article, we will learn how we can create a simple date picker component in an HTML or JSP page with the help of the JQuery UI plugin.

Table of Contents

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">
< head>
  < 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>
< body>
< p>Date: < input type="text" id="datepicker"></p>
< br/>
< 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.

jquery_UI_datepicker

after selecting the date, the UI displays the selected value, as shown below.

jquery_UI_datepicker_submitted

Conclusion

In this article, we learned how to create a date picker component using the JQuery UI date picker library.