jQuery UI Datepicker

The jQuery UI Datepicker widget turns a plain text input into an interactive calendar popup. Users click the input, a calendar appears, they pick a date, and the input fills automatically. It handles all formatting, navigation, and accessibility without any extra code from you.

Basic Setup

HTML:
<input type="text" id="bookingDate" placeholder="Select date" />

jQuery:
$(document).ready(function() {
    $("#bookingDate").datepicker();
});

That single line adds a fully functional calendar popup to the input.

Diagram: Datepicker Popup Flow

  [bookingDate input]  ← user clicks
          │
  Calendar popup appears:
  ┌─────────────────────────────┐
  │  ◀  September 2026  ▶       │
  │  Su Mo Tu We Th Fr Sa       │
  │              1  2  3  4  5  │
  │   6  7  8  9 10 11 12       │
  │  13 14 15 16 17 18 19       │
  │  20 [21] 22 23 24 25 26     │  ← today highlighted
  │  27 28 29 30                │
  └─────────────────────────────┘
          │
  User clicks 21
          │
  Input fills: "09/21/2026"  ← popup closes

Common Datepicker Options

$("#bookingDate").datepicker({
    dateFormat:      "dd-mm-yy",    // output format (dd=day, mm=month, yy=4-digit year)
    minDate:         0,             // 0 = today; -7 = 7 days ago; "+1w" = one week ahead
    maxDate:         "+3m",         // max selectable date: 3 months from today
    defaultDate:     "+1w",         // calendar opens showing one week ahead
    showOtherMonths: true,          // show days from adjacent months
    selectOtherMonths: true,        // allow clicking those days
    numberOfMonths:  2,             // show 2 months side by side
    showButtonPanel: true,          // show Today and Done buttons at bottom
    changeMonth:     true,          // dropdown to jump to any month
    changeYear:      true           // dropdown to jump to any year
});

Date Format Codes

  d   → day without leading zero     (1, 2 ... 31)
  dd  → day with leading zero        (01, 02 ... 31)
  m   → month without leading zero   (1, 2 ... 12)
  mm  → month with leading zero      (01, 02 ... 12)
  M   → short month name             (Jan, Feb ...)
  MM  → full month name              (January, February ...)
  y   → 2-digit year                 (26)
  yy  → 4-digit year                 (2026)

  Examples:
  "dd/mm/yy"   → 21/09/2026
  "MM d, yy"   → September 21, 2026
  "yy-mm-dd"   → 2026-09-21  (ISO format)

Date Range — Start and End Datepickers

HTML:
<input type="text" id="checkIn"  placeholder="Check-in" />
<input type="text" id="checkOut" placeholder="Check-out" />

jQuery:
$(document).ready(function() {
    var checkIn  = $("#checkIn").datepicker({
        minDate: 0,
        onClose: function(selectedDate) {
            checkOut.datepicker("option", "minDate", selectedDate);
        }
    });

    var checkOut = $("#checkOut").datepicker({
        minDate: "+1d"
    });
});

When the user picks a check-in date, the check-out calendar automatically disables all dates before it.

Diagram: Date Range Validation

  User picks check-in: 25 Sep 2026
          │
  onClose fires → sets check-out minDate to 25 Sep 2026
          │
  User opens check-out calendar:
  24 Sep 2026 and earlier → greyed out, not clickable
  25 Sep 2026 onward      → selectable

Datepicker Events

$("#bookingDate").datepicker({
    onSelect: function(dateText, inst) {
        // fires when user picks a date
        console.log("Selected:", dateText);
        calculateNights(dateText);
    },
    beforeShowDay: function(date) {
        // runs for every calendar day before display
        var day = date.getDay();
        // disable Sundays (0) — return [selectable, cssClass, tooltip]
        if (day === 0) {
            return [false, "disabled-day", "Closed on Sundays"];
        }
        return [true, "", ""];
    }
});

Getting and Setting Dates Programmatically

// Get current selected date as a formatted string
var dateStr = $("#bookingDate").datepicker("getDate");

// Get current selected date as a JavaScript Date object
var dateObj = $("#bookingDate").datepicker("getDate");
console.log(dateObj.getFullYear());   // e.g. 2026

// Set a date programmatically
$("#bookingDate").datepicker("setDate", "09/25/2026");
$("#bookingDate").datepicker("setDate", new Date());   // set to today

// Open or close the calendar in code
$("#bookingDate").datepicker("show");
$("#bookingDate").datepicker("hide");

Inline Datepicker (No Input Field)

HTML:
<div id="inlineCal"></div>

jQuery:
$(document).ready(function() {
    $("#inlineCal").datepicker({
        onSelect: function(dateText) {
            $("#selectedDate").text("You picked: " + dateText);
        }
    });
});

Attach datepicker to a <div> instead of an input to show the calendar always visible on the page.

Quick Summary

• Call .datepicker() on a text input to add a calendar popup.
• Use dateFormat to control how the selected date appears in the input.
• Use minDate and maxDate to restrict selectable date ranges.
• Use onSelect to run logic when a date is chosen.
• Use beforeShowDay to disable specific days (weekends, holidays).
• Attach to a <div> instead of an input for an always-visible inline calendar.