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

In this article, we will learn how to create a simple date picker in HTML and JSP pages using JQuery UI plugin.

Following are the steps involved to add JQuery date picker to a HTML or JSP page.

  • Create a HTML/JSP page and import required javascript and css files.
  • Add the required HTML code snippet to plugin the date picker.
  • Call date picker function using script tag.

Create a HTML or JSP page and import required javascript and css files

Create a 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 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 required css and js files. Next step is to create a <input> HTML tag and bind the datepicker 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 JQuery UI function as shown below.

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

We can modify the date picker settings using utility function setDefaults(options). This function can be used to set default options for the date picker. Few of the options are listed in the next section below.

Example:

$.datepicker.setDefaults({
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "calender.gif",
        buttonText: "Calendar"
});

Few useful options and methods of JQuery UI datepicker are given below

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. For this showOn option should be set to ‘button’ or ‘both’.
  • showOn : To set when the datepicker window should appear. Values can be ‘focus’, ‘button’, in case of button is clicked or ‘both’.
  • buttonText : Button text, which will be displayed on button or text displayed on hovering on the datepicker image in case buttonImage option is used(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 : This should be set to true, if buttonImage option is used.
  • 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, changeYear can be used 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 minDate can be used to set minimum selectable date.
  • onClose : Call back function to be called on close of datepicker window. Function parameters will be selected date and datepicker instance.
  • onSelect : call back function, called on selecting the date. Function parameters will be selected date and datepicker instance.

Methods

  • destroy : Removes the current datepicker instance. Example usage: $( “.selector” ).datepicker( “destroy” );
  • getDate : Returns the selected date or null if no date is selected. 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 the all available options, methods and functions, visit official JQuery UI datepicker documentation.

A 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 above JQuery UI datepicker code is shown below.

jquery_UI_datepicker

after selecting the date, selected value is displayed as shown below.

jquery_UI_datepicker_submitted

You may be interested in: