jQueryUI Datepicker Plugin for all your Calendar Requirements

Filed Under: jQuery

jQuery provides a variety of Calendar Plugins that would allow you to integrate calendar features to your websites. These plugins are very easy to use and we can easily include these plugins in our web applications. In this post, we are going to discuss about one of the jQuery calendar plugins, jQuery UI Datepicker.

jQueryUI Datepicker

The jQueryUI Datepicker plugin allow us to select a date from a popup or an in-line calendar. This plugin provide several options to customize the date format, localize calendar, restrict date range, and select a date range and many more. I would like to get down to the details.

Contents

jQueryUI Datepicker Options

In this section, we will discuss about different options available to customize the jQueryUI Datepicker plugin. We have used many of these options in the jQueryUI Datepicker in Action section.

Options Syntax Description
altField $( “.selector” ).datepicker({ altField: “#actualDate” }); Alternate input field, updated with the selected date from the datepicker.
altFormat $( “.selector” ).datepicker({ altFormat: “yy-mm-dd” }); Date format of the altField option.
appendText $( “.selector” ).datepicker({ appendText: “(yyyy-mm-dd)” }); Text that is displayed next to the the input field.
autoSize $( “.selector” ).datepicker({ autoSize: true }); Automatically resize input field if it is set to true.
beforeShow This option is a callback function that is invoked just before displaying  datepicker.
buttonImage $( “.selector” ).datepicker({ buttonImage: “/images/datepicker.gif” }); Display the datepicker with URL of an image \ when the showOn option is set to “button” or “both”.
buttonImageOnlyType $( “.selector” ).datepicker({ buttonImageOnly: true }); Indicate whether the button image should be rendered inside button.
buttonTextType $( “.selector” ).datepicker({ buttonText: “Choose” }); Display text on the trigger button.
calculateWeek $( “.selector” ).datepicker({ calculateWeek: myWeekCalc }); Calculate the week of the year for the selected date.
changeMonth $( “.selector” ).datepicker({ changeMonth: true }); Month will be rendered as a drop down if it is set to true.
changeYear $( “.selector” ).datepicker({ changeYear: true }); Year will be rendered as a drop down if it is set to true.
closeText $( “.selector” ).datepicker({ closeText: “Close” }); Display text on the close button.showButtonPanel option is used to display this button
constrainInput $( “.selector” ).datepicker({ constrainInput: false }); Input field is constrained to those characters allowed by the current dateFormat option when this is set to true.
currentText $( “.selector” ).datepicker({ currentText: “Now” }); Display text on current day link. showButtonPanel option is used to display this button
dateFormat $( “.selector” ).datepicker({ dateFormat: “yy-mm-dd” }); Format for displayed dates.
dayNames $( “.selector” ).datepicker({ dayNames: [ “Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday” ]}); List of day names.
dayNamesMin $( “.selector” ).datepicker({ dayNamesMin: [ “Di”, “Lu”, “Ma”, “Me”, “Je”, “Ve”, “Sa” ] }); List of minimized day names.
dayNamesShort $( “.selector” ).datepicker({ dayNamesShort: [ “Dim”, “Lun”, “Mar”, “Mer”, “Jeu”, “Ven”, “Sam” ] }); List of abbreviated day names.
defaultDate $( “.selector” ).datepicker({ defaultDate: +7 }); Set the date to highlight on first opening if the field is blank
duration $( “.selector” ).datepicker({ duration: “slow” }); Vary the speed of date picker appearance.
firstDay $( “.selector” ).datepicker({ firstDay: 1 }); Set the first day of the week.
gotoCurrent $( “.selector” ).datepicker({ gotoCurrent: true }); The current day link moves to the currently selected date instead of today if it is set to true.
hideIfNoPrevNext $( “.selector” ).datepicker({ hideIfNoPrevNext: true }); Hide  previous and next links if the value is set to true.
isRTL $( “.selector” ).datepicker({ isRTL: true }); Check if the the current language is drawn from right to left.
maxDate $( “.selector” ).datepicker({ maxDate: “+1m +1w” }); Maximum selectable date.
minDate $( “.selector” ).datepicker({ minDate: new Date(2007, 1 – 1, 1) }); Minimum selectable date.
monthNames $( “.selector” ).datepicker({ monthNames: [ “Januar”, “Februar”, “Marts”, “April”, “Maj”, “Juni”, “Juli”, “August”, “September”, “Oktober”, “November”, “December” ] }); List of month names
monthNamesShort $( “.selector” ).datepicker({ monthNamesShort: [ “Jan”, “Feb”, “Mar”, “Apr”, “Maj”, “Jun”, “Jul”, “Aug”, “Sep”, “Okt”, “Nov”, “Dec” ] }); List of abbreviated month names.
navigationAsDateFormat $( “.selector” ).datepicker({ navigationAsDateFormat: true }); Check whether to navigate as
nextText $( “.selector” ).datepicker({ nextText: “Later” }); The text to display for the next month link
numberOfMonths $( “.selector” ).datepicker({ numberOfMonths: [ 2, 3 ] }); The number of months displayed at once.
onChangeMonthYear The callback function called when the month or year is changed.
onClose The callback function called when the datepicker is closed.
onSelect The callback function called when the date is selected from the datepicker.
prevText $( “.selector” ).datepicker({ prevText: “Earlier” }); Display text on the previous link.
selectOtherMonths $( “.selector” ).datepicker({ selectOtherMonths: true }); Whether days in other months shown before or after the current month are selectable.
shortYearCutoff $( “.selector” ).datepicker({ shortYearCutoff: 50 }); The cutoff year for determining the century for a date.
showAnim $( “.selector” ).datepicker({ showAnim: “fold” }); The animation effects used to display the datepicker.
showButtonPanel $( “.selector” ).datepicker({ showButtonPanel: true }); Set to true will display the button in the datepicker.
showCurrentAtPos $( “.selector” ).datepicker({ showCurrentAtPos: 3 }); Defines which position to display the current month while displaying multiple months.
showMonthAfterYear $( “.selector” ).datepicker({ showMonthAfterYear: true }); Set to true will display the month after the year in the header.
showOn $( “.selector” ).datepicker({ showOn: “both” }); Indicate when the date picker should appear.
showOptions $( “.selector” ).datepicker({ showOptions: { direction: “up” } }); Additional animation options.
showOtherMonths $( “.selector” ).datepicker({ showOtherMonths: true }); Whether to show the dates in other months at the start or end of the current month.
showWeek $( “.selector” ).datepicker({ showWeek: true }); A column is added to to display the week of the year.
stepMonths $( “.selector” ).datepicker({ stepMonths: 3 }); number of months to be moved when we click on prev or next links.
weekHeader $( “.selector” ).datepicker({ weekHeader: “W” }); Display text for the week of the year column heading.
yearRange $( “.selector” ).datepicker({ yearRange: “2002:2012” }); Range of years in the drop down.
yearSuffix $( “.selector” ).datepicker({ yearSuffix: “CE” }); Additional text to display after the year.

This table briefly describes all the available options in the jQueryUI Datepicker plugin.

Back To Top

jQueryUI Datepicker Methods

In this section, we will look into the jQueryUI Datepicker plugin methods and its syntax. These methods are very useful when you deal with the datepicker plugin.

Methods Syntax Description
destroy $(“.selector”).
datepicker(“destroy”);
Removes the datepicker functionality completely and return the element back to its pre-init state.
dialog $( “.selector” ).
datepicker( “dialog”, “10/10/2014” );
Opens the datepicker in a dialog box.Parameters are : date , onSelect , settings , pos.
getDate $( “.selector” ).
datepicker( “getDate” );
Returns the current date for the datepicker or null if no date has been selected.
hide $( “.selector” ).
datepicker( “hide” );
Close a previously opened date picker.
isDisabled $( “.selector” ).
datepicker( “isDisabled” );
Determine whether a date picker has been disabled.
option $( “.selector” ).
datepicker( “option”);
Gets an object containing key/value pairs representing the current datepicker options hash.
refresh $( “.selector” ).
datepicker( “refresh” );
Refresh the date picker after making any modification
setDate $( “.selector” ).
datepicker( “setDate”, “10/10/2014” );
This method is used to set the date for the datepicker.
show $( “.selector” ).
datepicker( “show” );
Display the date picker.
widget $( “.selector” ).
datepicker( “widget” );
Returns a jQuery object that contains the datepicker.

Back To Top

jQueryUI Datepicker in Action

In this section we will try different examples to explore the uses of jQueryUI Datepicker plugin.

Default Functionality

The following example demonstrates the default functionality of jQueryUI Datepicker plugin. It does not take any parameters. The datepicker is attached to a standard input field. Click on the field to open calendar with default functionality. This will be closed after selecting a date or when it is out of focus or you can hit esc button to close it.

datepicker-default.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker - Default</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

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

<body>
    <p>Click Here to Enter the date : <input type="text" id="date_picker"></p>
</body>
</html>

You will see the following output if you click on the input field.
datepicker-default

Datepicker with Animation

The following example demonstrates the jQuery datepicker plugin with animation. You can try animating the datepicker by selecting an option from the drop down and click on the input field shown in the example.

datepicker-anim.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker - Animation</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#date_picker" ).datepicker();
    $( "#effects" ).change(function() {
      $( "#date_picker" ).datepicker( "option", "showAnim", $( this ).val() );
    });
  });
  </script>
</head>
<body>

<p>Select Animation:<br>
  <select id="effects">
    <option value="show">Show (default)</option>
    <option value="bounce">Bounce</option>
    <option value="slideDown">Slide down</option>
    <option value="fadeIn">Fade in</option>
    <option value="blind">Blind</option>
    <option value="fold">Fold </option>
    <option value="">None</option>
  </select>
</p>
<p>Click Here to Enter Date: <input type="text" id="date_picker" size="25"></p>

</body>
</html>

You will see the following output if you click on the input field.
datepicker-anim

In-line Datepicker

The following example demonstrates the in-line jQuery datepicker plugin.

datepicker-inline.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker - Inline</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#date_picker" ).datepicker();
  });
  </script>
</head>
<body>
 
Date In-Line : <div id="date_picker"></div>
 
</body>
</html>

You will see the following output if you click on the input field.
datepicker-inline

Datepicker with Button

The following example demonstrates the jQuery datepicker with buttons. This plugin display a Today button to select today’s date and another button called Done to close the datepicker.

datepicker-button.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker - Button</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#date_picker" ).datepicker( {
    showButtonPanel: true
    });
  });
  </script>
</head>
<body>
<p>Click Here To Enter Date: <input type="text" id="date_picker"></p>
</body>
</html>

You will see the following output if you click on the input field.
datepicker-button

Datepicker Icon

The following example demonstrates the datepicker with icon trigger. You can view the datepicker by clicking on the icon next to the input field.

datepicker-icon.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker - Icon</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#date_picker" ).datepicker({
      showOn: "button",
      buttonImage: "/images/calendar-icon.png",
      buttonImageOnly: true,
      buttonText: "Select date"
    });
  });
  </script>
</head>
<body>
 
<p>Click on the Icon to Enter Date: <input type="text" id="date_picker"></p>
 
</body>
</html>

You will see the following output if you click on the icon next to the input field.
datepicker-icon

Format Date

The following example demonstrates the datepicker using dateFormat option in the JQueryUI Datepicker plugin. We have used dateFormat:"DD, d MM, yy" in this example. There are a number of dataFormat options available with this plugin.

datepicker-format.html


<!doctype html>
<html>
 <head>
  <title>jQuery UI Datepicker - Format</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <script>
         $(function() {
            $( "#date_picker" ).datepicker({
               appendText:"(Full - DD, d MM, yy)",
               dateFormat:"DD, d MM, yy"
            });
         });
   </script>
 </head>
  <body>
     <p>Click Here To Enter Date: <input type="text" id="date_picker" size=30></p>
  </body>
</html>

You will see the following output on your browser.
datepicker-format

Select Date Range

The following example demonstrates the datepicker to select range of dates.

datepicker-selectRange.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker - Select Range</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">To</label>
<input type="text" id="to" name="to">
</body>
</html>

You will see the following output on your browser.
datepicker-selectRange

Restrict Date Range

The following example demonstrates how to restrict the range of dates. We use minDate and maxDate options for this.

datepicker-restrictRange.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker – Restrict Range</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
      $( "#date_picker" ).datepicker({
        numberOfMonths: 3,minDate: -20, maxDate: "+1M +10D"
      });
  });
  </script>
</head>
<body>
<p>Clik Here to Enter the Date: <input type="text" id="date_picker"></p>
</body>
</html>

You will see the following output on your browser.
datepicker-restrictRange

Populate alternate field

The following example demonstrates how to populate an alternate field using the altField and altFormat options.

datepicker-alt.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker – Alt</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

    <script>
  $(function() {
    $( "#date_picker" ).datepicker({
      altField: "#alternate",
      altFormat: "DD, d MM, yy"
    });
  });
  </script>
</head>
<body>
<p>Click here To Enter Date: <input type="text" id="date_picker"> Alternate Date:<input type="text" id="alternate" size="30"></p>
</body>
</html>

You will see the following output on your browser.
datepicker-alt

Display Multiple Months

The following example demonstrates the datepicker with multiple months in a single datepicker. We can set the numberOfMonths option to an integer value greater than to display the multiple months in the datepicker.

datepicker-multiple.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Datepicker – Multiple Months</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#date_picker" ).datepicker({
      numberOfMonths: 2
    });
  });
  </script>
</head>
<body>
 
<p>Click Here To Enter the Date: <input type="text" id="date_picker"></p>
 
</body>
</html>

You will see the following output on your browser.
datepicker-multiple

You can see all these HTML pages in action by visiting to below URL.

jQueryUI Datepicker Plugin Demos

That’s all for the jQueryUI Datepicker plugin. You will see more jQuery plugins in the coming posts.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages