Datepicker

Code

$("#datepicker").datepicker({
  dateFormat: "yy-mm-dd",
  minDate: 0,
  maxDate: "+1Y",
  numberOfMonths: 2,
  showButtonPanel: true,
  changeMonth: true,
  changeYear: true,
  yearRange: "-10:+10",
  showAnim: "fadeIn",
  onSelect: function(dateText, inst) {
    console.log("Selected:", dateText);
  }
});

// Inline (always-visible) calendar that updates a hidden input
$("#inline-calendar").datepicker({
  altField: "#alt-date",
  altFormat: "DD, d MM, yy"
});

// Restrict to a date range using two pickers
$("#from").datepicker({
  onClose: function(selected) {
    $("#to").datepicker("option", "minDate", selected);
  }
});
$("#to").datepicker({
  onClose: function(selected) {
    $("#from").datepicker("option", "maxDate", selected);
  }
});

Explanation

Attaches a popup or inline calendar to a text input with full control over formatting (yy-mm-dd is the jQuery UI token format) and selectable range. The altField/altFormat pair lets you store a machine value while showing a friendly one. Chaining two pickers via onClose min/maxDate creates a constrained from/to range selector.

More jQuery UI Snippets