bootstrap-datepicker

bootstrap-datepicker is a jQuery plugin that turns a plain text input into an interactive calendar widget styled for Bootstrap’s form controls. It handles single-date selection, linked date ranges via the input-daterange class, and multi-date picking, while parsing typed input against a configurable date format so users can either type or click their way to a date.

Beyond the calendar UI, the plugin ships with over 80 locale files, a beforeShowDay/beforeShowMonth family of callbacks for custom day/month rendering, and a full public method API (show, hide, update, setDate, destroy) for programmatic control. It depends only on jQuery and Bootstrap’s CSS classes (not its JavaScript), so it drops into any project already using jQuery-based forms.

What You Get

• A jQuery plugin ($(...).datepicker()) that binds to any text input and renders a Bootstrap-styled calendar popup
• Built-in support for linked date ranges via the input-daterange container class, plus multi-date selection
• 80+ bundled locale files for internationalized month/day names and date formats
• A full method API (show, hide, update, setDate, setDates, destroy) for scripting the picker after initialization
• Customizable day/month/year/decade rendering hooks (beforeShowDay, beforeShowMonth, etc.) for disabling dates or adding custom CSS/tooltips

Common Use Cases

• Booking and reservation forms that need a linked start/end date range picker
• Checkout or signup forms collecting a birthdate or appointment date with format validation
• Admin dashboards needing a lightweight, dependency-light date filter without adopting a full UI framework
• Legacy jQuery/Bootstrap 3 or 4 applications that need a date input widget without a modern JS framework rewrite

Under The Hood

Architecture The entire plugin lives in a single UMD-wrapped file (js/bootstrap-datepicker.js) that defines two constructors, Datepicker (line 103) and DateRangePicker (line 1523), with all rendering and state logic implemented as prototype methods on each. A single jQuery entrypoint, $.fn.datepicker (registered at line 1692), inspects the target element — checking for the input-daterange class or an inputs option — to decide which constructor to instantiate, then dispatches string-named method calls (show, update, destroy, etc.) to the corresponding prototype function. Options are resolved through a three-tier merge (opts_from_el reads data-date-* attributes, opts_from_locale pulls locale-file defaults, then explicit JS options override both), which is a clean pattern but the monolithic single-file layout and prototype-held mutable state (current view date, selected dates array) are typical of the jQuery-plugin era and would make a full rewrite of the calendar-rendering logic risky without touching everything else.

Tech Stack Pure vanilla JavaScript plus jQuery (>=3.4.0 <4.0.0 per package.json, >=1.7.1 <4.0.0 per bower.json), styled via Less source compiled to dist/css. Grunt is the build tool (Gruntfile.js orchestrating grunt-contrib-concat, -uglify, -less, -cssmin), with grunt-contrib-qunit plus headless Puppeteer running the browser test suite. The package is published to npm, Bower, and cdnjs simultaneously, with prebuilt bundles checked into dist/js and dist/css for direct <script>-tag consumption.

Code Quality Tests live under tests/suites/ as QUnit suites split by feature (calendar-weeks, data-api, events, formats, inline, keyboard_navigation, methods, mouse_navigation, noconflict, options, timezone, touch_navigation) — a genuinely broad test surface for a project of this vintage. Linting is enforced via JSHint (js/.jshintrc) and JSCS (js/.jscsrc), and CI runs on GitHub Actions. There is no TypeScript or runtime type checking anywhere in the codebase — options and arguments are validated loosely if at all, and error handling is minimal, with an explicit throw new Error(...) reserved for a single misuse case (calling a string-command method against a multi-element jQuery collection) rather than general input validation. Naming is consistently camelCase throughout.

API Design The public API is a single, idiomatic jQuery entrypoint — $(selector).datepicker(options) — configurable through three interchangeable layers (JS options, data-date-* HTML attributes, or locale-file defaults) with clear precedence, so a working picker needs no more than one line of markup and one line of script. Range mode is auto-detected purely from the input-daterange class on a wrapping element, avoiding extra configuration. Subsequent calls use the chained string-command convention ($(sel).datepicker('update', ...)) common to plugins of this generation, which is consistent but requires memorizing the command vocabulary since no separate handle object is returned. Documentation is unusually thorough for a plugin this old — a dedicated ReadTheDocs site with options.rst, methods.rst, events.rst, i18n.rst, and keyboard.rst — which meaningfully lowers onboarding friction.