JQuery UI Datepicker

One of the fundamental goals of any website you develop is to provide ease of use to the visitor. JQuery UI provides such widgets which makes life of your visitor easier when they interact with your website. One such widget is the datepicker widget. Datepicker allows visitor to select a date from a calendar-style element instead of typing the date manually into some input element. JQuery UI datepicker function allows developer to make any input,div, span or any other element act like a datepicker. Simply call datepicker() function with or without optional parameters on any element which you want to ct like a date picker. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Autocomplete</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
           
             $( "#date-picker" ).datepicker();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         
        <p>Select Date: <input id="date-picker"></p>
      </div>
   </body>
</html>

Download Code Run Code

The above webpage contains an input element with id “date-picker”. The JQuery factory function selects this element. Inside the script, the datepicker() function is called on this element which makes it act like a date picker control. If you open the page in the browser and select the input box, you will see a calendar appear. If you select any date from calendar, you will see it pops up in the text box in text form.

Datepicker with Optional Parameters

You can also pass additional optional parameters to the datepicker() function to change format or behavior of the datepicker control. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters dateFormat and appendText are used to change the format of the date and the text appended with the control. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Datepicker with Optional parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
           
             $( "#date-picker" ).datepicker({
                 
                appendText:"(dd-mm-yy)",
               dateFormat:"dd-mm-yy"
             });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         
        <p>Select Date: <input id="date-picker"></p>
      </div>
   </body>
</html>

Download Code Run Code

If you click the text box, you will see date picker appear. Now if you select the date, you shall see that date will appear in the format you specified as a parameter to datepicker() function.

<<< JQuery UI ButtonJQuery UI Menu >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .