Home / Slideshow / jQuery UI Datepicker
jQuery UI Datepicker

jQuery UI Datepicker

Download Demo
  • Overview
  • Documents
User Rating: 4.6/5 ( 1 votes)
Your Rating:
I think most jQuery developers at least know about jQuery UI. It is a library for building common interface features such as progress bars, tabs, tooltips, and accordion menus. Luckily there is also a component for rendering input date pickers using jQuery UI Datepicker. The codes are very simple and follow the same formatting you would expect with any other jQuery plugin.
The library comes equipped with more dynamic features than the basic examples above. You can now include date ranges where users select 2 different dates for 2 different input fields. Then using these values it is possible to combine a full date period for querying articles and similar data requests. It will take a bit of time customizing the styles, but it is definitely an exciting option for JS developers. Just remember this plugin will require dependencies for jQuery and jQuery UI libraries, along with the jQuery UI theme stylesheet


The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.

While the datepicker is open, the following key commands are available:

  • PAGE UP: Move to the previous month.
  • PAGE DOWN: Move to the next month.
  • CTRL+PAGE UP: Move to the previous year.
  • CTRL+PAGE DOWN: Move to the next year.
  • CTRL+HOME: Move to the current month. Open the datepicker if closed.
  • CTRL+LEFT: Move to the previous day.
  • CTRL+RIGHT: Move to the next day.
  • CTRL+UP: Move to the previous week.
  • CTRL+DOWN: Move the next week.
  • ENTER: Select the focused date.
  • CTRL+END: Close the datepicker and erase the date.
  • ESCAPE: Close the datepicker without selection.


Scroll To Top