jQuery UI Datepicker

jQuery UI's datepicker() widget turns a plain text input into a full calendar picker. Users can click the field to pop open a month view, navigate months/years, and pick a date without typing it by hand. It's built entirely on top of jQuery, so it works with the same selectors and events you already know.

Quick Reference

Option / Event Description Example
.datepicker()Attaches a popup calendar to a text input.$('#date').datepicker();
dateFormatControls the format of the value written into the input.dateFormat: 'yy-mm-dd'
minDate / maxDateRestrict the selectable date range.minDate: 0, maxDate: '+1M'
inline: trueRenders the calendar directly on the page instead of a popup.$('#cal').datepicker({ inline: true });
onSelectCallback fired when a date is chosen.onSelect: function(date){ ... }
Tip: Load the jQuery UI CSS theme (jquery-ui.css) so the calendar renders with proper styling and highlighted "today"/selected dates.

1) Basic Datepicker


$('#date').datepicker();
Try it Yourself »

2) dateFormat Option


$('#date').datepicker({
  dateFormat: 'yy-mm-dd' // e.g. 2026-08-14; try 'dd/mm/yy' too
});
Try it Yourself »

3) minDate / maxDate


$('#date').datepicker({
  minDate: 0,     // no past dates
  maxDate: '+1M' // up to one month ahead
});
Try it Yourself »

4) inline: true (Always-Visible Calendar)


$('#cal').datepicker({
  inline: true
});
Try it Yourself »

5) onSelect Callback


$('#date').datepicker({
  onSelect: function(dateText){
    console.log(dateText); // the chosen date string
  }
});
Try it Yourself »

Live Demo

Click the field below to open a real calendar and pick a date. The selected date is echoed underneath via onSelect.

No date selected yet.
Note: Datepicker only formats/limits the calendar UI — you should still validate the submitted date on the server, since users can edit the input directly unless you make it readonly.