← Back to jQuery Course | Chapter 13: jQuery UI | Lesson 3 of 5

Essential UI Widgets

The datepicker gives users a calendar for choosing a date. It is commonly used in forms.

In this page:

  1. Datepicker
  2. Dialog
  3. Tabs
  4. Accordion and Autocomplete
  5. Small Widget Project
Syntax
javascript 
$(selector).widgetName({ option: value });

Datepicker

The datepicker widget attaches a pop-up calendar to an input field so users can pick a date visually instead of typing one in a specific format, which reduces input errors and makes date entry far more user-friendly.

Example: Datepicker

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <input id="date">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#date").datepicker();
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Dialog

The dialog widget displays content in a movable, often modal window that floats above the rest of the page, and it can be opened and closed programmatically or by the user. It's commonly used for confirmations, forms, and alerts that shouldn't be part of the main page flow.

Example: Dialog

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="dialog" title="Confirm">Are you sure?</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#dialog").dialog();
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Tabs

The tabs widget organizes related content into separate panels that share one visible area, letting users switch between them by clicking a tab label instead of scrolling through everything at once. This is a common pattern for settings pages and detailed product information.

Example: Tabs

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
    #demo .ui-state-active, #demo .ui-state-active a { color:#1a1a1a; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="tabs">
      <ul><li><a href="#tab1">One</a></li><li><a href="#tab2">Two</a></li></ul>
      <div id="tab1">Content 1</div>
      <div id="tab2">Content 2</div>
    </div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#tabs").tabs();
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Accordion and Autocomplete

The accordion widget shows expandable and collapsible sections, revealing one section's content at a time to save space. Autocomplete suggests matching values from a list as the user types into an input field, speeding up data entry for known values.

Example: Accordion and Autocomplete

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
    #demo .ui-state-active, #demo .ui-state-active a { color:#1a1a1a; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="accordion">
      <h3>Section 1</h3><div>Content 1</div>
      <h3>Section 2</h3><div>Content 2</div>
    </div>
    <input id="auto">

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#accordion").accordion();
      $("#auto").autocomplete({source: ["Apple", "Banana"]});
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Small Widget Project

These widgets are frequently combined to build complete forms and interfaces quickly — a dialog containing a datepicker and an autocomplete field, for instance — without writing custom interaction code for each piece.

Example: Small Widget Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="dialog" title="Book Appointment">
      <input id="date">
    </div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    var $initial = $("body").children();

    $("#runBtn").click(function() {
      $("#date").datepicker();
      $("#dialog").dialog();
    });

    $("#resetBtn").click(function() {
      $("body").children().not($initial).remove();
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Introduction to jQuery UI · Customizing jQuery UI · Interaction Helpers · Custom Transitions and Easing

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Calling .datepicker() on a <div> or <input> before the DOM is ready, so the element is not found and nothing happens.
  2. Expecting .dialog() to open only on demand, when it opens immediately unless you pass autoOpen: false.
  3. Building .tabs() markup without matching ids, such as <a href="#tab-1"> with no element id="tab-1", so the panels are empty.
🔒

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson Interaction Helpers Next Lesson → Custom Transitions and Easing

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.