PHPackages webcito/bs-datepicker - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Localization & i18n](/categories/localization) 4. / 5. webcito/bs-datepicker ActiveLibrary[Localization & i18n](/categories/localization) webcito/bs-datepicker ===================== A lightweight jQuery datepicker based on Bootstrap 5, supporting single-date and range selection, inline or dropdown rendering, Intl-based localization, multi-month views, disabled date rules, and a small, clean API. v1.0.2(2mo ago)014MIT Since Dec 18Pushed 2mo ago1 watchersCompare [ Source](https://github.com/ThomasDev-de/bs-datepicker)[ Packagist](https://packagist.org/packages/webcito/bs-datepicker)[ Docs](https://github.com/ThomasDev-de/bs-datepicker)[ RSS](/packages/webcito-bs-datepicker/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (4)Versions (4)Used By (0) bs-datepicker ============= [](#bs-datepicker) A jQuery-based datepicker plugin with a Bootstrap look & feel. Current version: `1.0.2` [![preview](/demo/Bootstrap-Datepicker-Demo.png)](/demo/Bootstrap-Datepicker-Demo.png) Highlights - Single date and range selection - Locale support (e.g., `de-DE`) including localized month and weekday names - Inline or dropdown rendering - Week start Monday or Sunday - Multi-month view (`months`) with responsive layout (tiles wrap on small screens) - Public method `setRange(boolean)` to toggle range mode at runtime - Visible display as a clickable wrapper (no input) with calendar icon in dropdown mode; in inline mode no separate wrapper - Configurable navigation and clear icons (Bootstrap Icons classes) - Optional: disabled dates (before a date, after a date, individual dates) - Subtle highlighting for selected days and ranges (Bootstrap 5.3 utilities) Options OptionTypeDefaultDescription`locale`string`de-DE`Intl locale for month/weekday names and formatting`range`boolean`false`Enable range selection (start/end)`inline`boolean`false`Render inline (no dropdown)`startOnSunday`boolean`false`Start week on Sunday (else Monday)`autoClose`boolean`true`Close dropdown after pick (single) or after end (range)`format``'locale' | 'iso' | function``'locale'`Output formatter for legacy/direct input mode`separator`string`–`Separator used for range text`zIndex`number`1080`z-index for dropdown panel`months`number`1`Number of months to render side by side`placeholder`string`Select period`Placeholder for visible display/inline output`icons.prevYear`string`bi bi-chevron-double-left`Icon (previous year)`icons.prev`string`bi bi-chevron-left`Icon (previous month)`icons.today`string`bi bi-record-circle`Icon (jump to today)`icons.next`string`bi bi-chevron-right`Icon (next month)`icons.nextYear`string`bi bi-chevron-double-right`Icon (next year)`icons.clear`string`bi bi-x-lg`Icon (clear selection)`classes.display`string`form-control d-flex align-items-center justify-content-between`Classes on the visible display wrapper (dropdown mode)`classes.displayText`string`''`Classes on the text span`classes.displayIcon`string`bi bi-calendar-event`Classes on the icon`disabled.before`Datestring–`disabled.after`Datestring–`disabled.min`Datestring–`disabled.max`Datestring–`disabled.dates`(Datestring)\[\]–Methods MethodSignatureReturnsDescription`val``val()``string` or `[string,string]`Getter: Single → ISO `YYYY-MM-DD` or `''`; Range → `[startISO, endISO]` (empty strings when unset)`val``val(date)``jQuery`Setter (Single): accepts `Date`val``val(start, end)` / `val([start, end])``jQuery`Setter (Range): accepts `Date`getDate``getDate()``Datenull`or`\[Date,Date\]``setDate``setDate(Datestringnull)``setDate``setDate([start,end])``jQuery`Set range (disabled dates are purged)`destroy``destroy()``jQuery`Destroy instance and remove DOM/listeners`setDisableDates``setDisableDates(config)``jQuery`Set disabled configuration at runtime; purges invalid selection`getDisableDates``getDisableDates()``objectnull``setMin``setMin(date)``jQuery`Set `min` boundary; purges invalid selection`setMax``setMax(date)``jQuery`Set `max` boundary; purges invalid selection`setMonth``setMonth(count)``jQuery`Set the number of months to display simultaneously`setViewMonth``setViewMonth(date)``jQuery`Jump to a specific month/year without changing selection`setRange``setRange(boolean)``jQuery`Toggle between single and range selection at runtime; preserves selection as start/single`setDisabled``setDisabled(boolean)``jQuery`Toggle picker interaction; when `true` the dropdown cannot be opened`clearDisableDates``clearDisableDates()``jQuery`Remove all disabled rules`setLocale``setLocale(locale)``jQuery`Switch locale at runtime and re-render immediatelyEvents (Namespace: `bs.datepicker`) EventWhendetail payload`init.bs.datepicker`After initialization`{ range:boolean, inline:boolean, months:number }``show.bs.datepicker`Dropdown shown`{}``hide.bs.datepicker`Dropdown hidden`{}``render.bs.datepicker`After each render`{ current:Date, range:boolean }``navigate.bs.datepicker`On nav buttons`{ action:'prev'`changeDate.bs.datepicker`Any selection changeSingle: `{ value:Date`clear.bs.datepicker`On clear`{}` (plus a `changeDate` with nulls)`setLocale.bs.datepicker`After `setLocale``{ locale:string }``setDisableDates.bs.datepicker`After `setDisableDates``{ disabled:object }``setMin.bs.datepicker`After `setMin``{ min:Date`setMax.bs.datepicker`After `setMax``{ max:Date`setMonth.bs.datepicker`After `setMonth``{ months:number }``setViewMonth.bs.datepicker`After `setViewMonth``{ current:Date }``setRange.bs.datepicker`After `setRange``{ range:boolean }``setDisabled.bs.datepicker`After `setDisabled``{ disabled:boolean }``clearDisableDates.bs.datepicker`After `clearDisableDates``{}`Example (legacy – direct input) ``` $('#dp').bsDatepicker({ locale: 'de-DE', range: true, inline: true, months: 2, disabled: {max: '2025-12-31', dates: ['2025-12-24', '2025-12-25']}, icons: { prev: 'bi bi-arrow-left', next: 'bi bi-arrow-right', clear: 'bi bi-x' } }); ``` Example (container mode – hidden inputs inside wrapper) ``` $('#rangeInline').bsDatepicker({inline: true, months: 2, classes: {displayIcon: 'bi bi-calendar3'}}); ``` Disabled dates (change at runtime) ``` // Disable all days up to today (lock the past) $('#dp').bsDatepicker('setDisableDates', {before: new Date()}); // Disable the future only $('#dp').bsDatepicker('setDisableDates', {after: '2026-01-01'}); // Disable individual holidays $('#dp').bsDatepicker('setDisableDates', {dates: ['2025-12-24', '2025-12-25']}); // Use min/max $('#dp').bsDatepicker('setDisableDates', {min: '2025-01-01', max: '2025-12-31'}); // Convenience methods $('#dp').bsDatepicker('setMin', '2025-01-01'); $('#dp').bsDatepicker('setMax', '2025-12-31'); $('#dp').bsDatepicker('clearDisableDates'); // Prevent opening the picker $('#dp').bsDatepicker('setDisabled', true); // Enable it again $('#dp').bsDatepicker('setDisabled', false); // Locale wechseln (UI wird neu gerendert) $('#dp').bsDatepicker('setLocale', 'de-DE'); ``` Notes - To display the icons you must include the Bootstrap Icons CSS, e.g.: ``` ``` - The “Clear” button in the header clears the selection (single date or range). Hidden inputs are set to empty strings. - In container mode, hidden inputs are always filled in ISO format `YYYY-MM-DD`. The visible display shows localized, formatted values. - Disabled days are visually disabled and cannot be clicked. Navigation remains possible. - Events are triggered on the container element (container mode) or on the input/anchor (legacy). You can access data via `e.detail` or the 2nd handler argument. ### Health Score 36 — LowBetter than 82% of packages Maintenance88 Actively maintained with recent releases Popularity7 Limited adoption so far Community7 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~45 days Total 3 Last Release 61d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81) --- Top Contributors [![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (12 commits)") --- Tags bootstrapbootstrap-datepickerbootstrap5calendardate-pickerdate-rangedate-range-pickerdatepickerfrontendintljqueryjquery-pluginlocalizationmultimonthuiintllocalizationuijquerycalendarbootstrapfrontenddate pickerjquery-plugindatepickerdate-rangebootstrap-5range-pickerbootstrap-datepickermultimonth ### Embed Badge ![Health badge](/badges/webcito-bs-datepicker/health.svg) ``` [![Health](https://phpackages.com/badges/webcito-bs-datepicker/health.svg)](https://phpackages.com/packages/webcito-bs-datepicker) ``` ### Alternatives [symfony/intl Provides access to the localization data of the ICU library 2.6k199.8M1.1k](/packages/symfony-intl)[techlab/smartwizard The awesome jQuery step wizard plugin 79096.2k2](/packages/techlab-smartwizard)[aplus/language Aplus Framework Language Library 2351.7M15](/packages/aplus-language)[punic/punic PHP-Unicode CLDR 1542.9M29](/packages/punic-punic)[aura/intl The Aura Intl package provides internationalization tools, specifically message translation. 898.3M4](/packages/aura-intl)[skillshare/formatphp Internationalize PHP apps. This library provides an API to format dates, numbers, and strings, including pluralization and handling translations. 8029.6k](/packages/skillshare-formatphp) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)