Add VCP to build and docs guides (#42157)

mdo · web-flow · commit f9628025d35d · 2026-03-12T10:03:51.000-07:00
* Add VCP to build and docsguides

* fix
diff --git a/README.md b/README.md
@@ -115,7 +115,7 @@ Within the download you’ll find the following directories and files, logically
   ```
 </details>
 
-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Floating UI](https://floating-ui.com/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element.
+We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Floating UI](https://floating-ui.com/) and [Vanilla Calendar Pro](https://vanilla-calendar.pro/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element.
 
 
 ## Bugs and feature requests
diff --git a/build/generate-sri.mjs b/build/generate-sri.mjs
@@ -40,6 +40,10 @@ const files = [
   {
     file: 'node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.min.js',
     configPropertyName: 'floating_ui_hash'
+  },
+  {
+    file: 'node_modules/vanilla-calendar-pro/index.js',
+    configPropertyName: 'vanilla_calendar_pro_hash'
   }
 ]
 
diff --git a/build/rollup.config.mjs b/build/rollup.config.mjs
@@ -12,7 +12,7 @@ const BUNDLE = process.env.BUNDLE === 'true'
 const ESM = process.env.ESM === 'true'
 
 let destinationFile = `bootstrap${ESM ? '.esm' : ''}`
-const external = ['@floating-ui/dom']
+const external = ['@floating-ui/dom', 'vanilla-calendar-pro']
 const plugins = [
   babel({
     // Only transpile our source code
@@ -22,14 +22,16 @@ const plugins = [
   })
 ]
 const globals = {
-  '@floating-ui/dom': 'FloatingUIDOM'
+  '@floating-ui/dom': 'FloatingUIDOM',
+  'vanilla-calendar-pro': 'VanillaCalendarPro'
 }
 
 if (BUNDLE) {
   destinationFile += '.bundle'
-  // Remove last entry in external array to bundle Floating UI
-  external.pop()
+  // Remove all entries in external array to bundle Floating UI and Vanilla Calendar Pro
+  external.length = 0
   delete globals['@floating-ui/dom']
+  delete globals['vanilla-calendar-pro']
   plugins.push(
     replace({
       'process.env.NODE_ENV': '"production"',
diff --git a/config.yml b/config.yml
@@ -43,6 +43,9 @@ cdn:
   floating_ui:          "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.0/dist/floating-ui.dom.umd.min.js"
   floating_ui_hash:     "sha384-R7p1RqabZNhI+RdPNIzTouzd/LBVorZ0Tn3ApcogSOk+HF3o+P0HIenrUw/n0MOj"
   floating_ui_esm:      "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.0/dist/floating-ui.dom.esm.min.js"
+  vanilla_calendar_pro: "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.js"
+  vanilla_calendar_pro_hash: "sha384-uufJjV19/4zCvBe4t3zJFWdYpBIrAC78Ef5NN2i4VjmTowSYuAx+m56vF6ccI4V3"
+  vanilla_calendar_pro_esm: "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.mjs"
 
 anchors:
   min:                  2
diff --git a/package.json b/package.json
@@ -202,13 +202,15 @@
     "shim": {
       "js/bootstrap": {
         "deps": [
-          "@floating-ui/dom"
+          "@floating-ui/dom",
+          "vanilla-calendar-pro"
         ]
       }
     },
     "dependencies": {},
     "peerDependencies": {
-      "@floating-ui/dom": "^1.7.0"
+      "@floating-ui/dom": "^1.7.0",
+      "vanilla-calendar-pro": "^3.1.0"
     }
   },
   "overrides": {
diff --git a/site/data/plugins.yml b/site/data/plugins.yml
@@ -14,6 +14,10 @@
   description: Expand and collapse areas of content, or create accordions.
   link: components/collapse/
 
+- name: Datepicker
+  description: Add date selection to form inputs. Built on Vanilla Calendar Pro.
+  link: forms/datepicker/
+
 - name: Dialog
   description: Add flexible and responsive dialogs to your project.
   link: components/dialog/
diff --git a/site/src/content/docs/customize/optimize.mdx b/site/src/content/docs/customize/optimize.mdx
@@ -14,7 +14,7 @@ If you’re not using a component, comment it out or delete it entirely. For exa
 
 ## Lean JavaScript
 
-Bootstrap’s JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Floating UI) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you’re customizing via Sass, be sure to remove related JavaScript.
+Bootstrap’s JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependencies (Floating UI and Vanilla Calendar Pro) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you’re customizing via Sass, be sure to remove related JavaScript.
 
 For instance, assuming you’re using your own JavaScript bundler like Webpack, Parcel, or Vite, you’d only import the JavaScript you plan on using. In the example below, we show how to just include our dialog JavaScript:
 
@@ -35,7 +35,7 @@ import 'bootstrap/js/dist/dialog';
 // import 'bootstrap/js/dist/tooltip';
 ```
 
-This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Floating UI dependency in your `package.json` file.
+This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Floating UI dependency in your `package.json` file. If you’re using the datepicker, be sure to also list the Vanilla Calendar Pro dependency.
 
 <Callout>
 **Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following:
diff --git a/site/src/content/docs/customize/rtl.mdx b/site/src/content/docs/customize/rtl.mdx
@@ -89,12 +89,13 @@ Here's a modified RTL starter template:
 
     <!-- Optional JavaScript; choose one of the two! -->
 
-    <!-- Option 1: Bootstrap Bundle with Floating UI -->
+    <!-- Option 1: Bootstrap Bundle with Floating UI and Vanilla Calendar Pro -->
     <script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
 
-    <!-- Option 2: Separate Floating UI and Bootstrap JS -->
+    <!-- Option 2: Separate Floating UI, Vanilla Calendar Pro, and Bootstrap JS -->
     <!--
     <script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
+    <script src="[[config:cdn.vanilla_calendar_pro]]" integrity="[[config:cdn.vanilla_calendar_pro_hash]]" crossorigin="anonymous"></script>
     <script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
     -->
   </body>
diff --git a/site/src/content/docs/getting-started/install.mdx b/site/src/content/docs/getting-started/install.mdx
@@ -83,18 +83,19 @@ Here are our primary CDN links for CSS and JavaScript:
 <script src="[[config:cdn.js_bundle]]" integrity="[[config:cdn.js_bundle_hash]]" crossorigin="anonymous"></script>
 ```
 
-If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Floating UI before our JS, via a CDN preferably.
+If you’re using our compiled JavaScript and prefer to include Floating UI and Vanilla Calendar Pro separately, add them before our JS, via a CDN preferably.
 
 ```html
 <script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
+<script src="[[config:cdn.vanilla_calendar_pro]]" integrity="[[config:cdn.vanilla_calendar_pro_hash]]" crossorigin="anonymous"></script>
 <script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
 ```
 
 <BsTable>
 | File type | URL |
 | --- | --- |
 | CSS | [`[[config:cdn.css]]`]([[config:cdn.css]]) |
-| JS (with Floating UI) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) |
+| JS bundle (with Floating UI and Vanilla Calendar Pro) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) |
 </BsTable>
 
 ### Using CDNs
@@ -130,7 +131,7 @@ You can also do the old fashioned thing and download Bootstrap manually. Choose
 <BsTable>
 | Type | Description | Link |
 | --- | --- | --- |
-| <strong class="text-nowrap">Distribution files</strong> | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like Floating UI. | <a href="[[config:download.dist]]" class="btn-subtle theme-accent btn-sm">Download</a> |
+| <strong class="text-nowrap">Distribution files</strong> | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like Floating UI and Vanilla Calendar Pro. | <a href="[[config:download.dist]]" class="btn-subtle theme-accent btn-sm">Download</a> |
 | <strong class="text-nowrap">Source files</strong> | Sass, JavaScript, and documentation files for compiling with your own asset pipeline. Requires [Sass compiler]([[docsref:/guides/contribute#sass]]), [Autoprefixer](https://github.com/postcss/autoprefixer), and a JavaScript bundler like [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.js.org/). | <a href="[[config:download.source]]" class="btn-subtle theme-accent btn-sm">Download</a> |
 </BsTable>
 
diff --git a/site/src/content/docs/getting-started/javascript.mdx b/site/src/content/docs/getting-started/javascript.mdx
@@ -6,13 +6,14 @@ toc: true
 
 ## JS components
 
-Curious which components explicitly require our JavaScript and Floating UI?
+Curious which components explicitly require our JavaScript and Floating UI or Vanilla Calendar Pro?
 
 - Accordions for extending our Collapse plugin
 - Alerts for dismissing
 - Buttons for toggling states and checkbox/radio functionality
 - Carousel for all slide behaviors, controls, and indicators
 - Collapse for toggling visibility of content
+- Datepicker for date selection (also requires [Vanilla Calendar Pro](https://vanilla-calendar.pro/))
 - Dropdowns for displaying and positioning (also requires [Floating UI](https://floating-ui.com/))
 - Modals for displaying, positioning, and scroll behavior
 - Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors
@@ -59,19 +60,21 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst
 </script>
 ```
 
-Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Floating UI dependency, which imports Floating UI into our JavaScript like so:
+Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Floating UI and Vanilla Calendar Pro dependencies, which are imported into our JavaScript like so:
 
 ```js
 import * as Popper from "@floating-ui/dom"
+import { Calendar } from "vanilla-calendar-pro"
 ```
 
 If you try this as-is, you’ll see an error in the console like the following:
 
 ```text
 Uncaught TypeError: Failed to resolve module specifier "@floating-ui/dom". Relative references must start with either "/", "./", or "../".
+Uncaught TypeError: Failed to resolve module specifier "vanilla-calendar-pro". Relative references must start with either "/", "./", or "../".
 ```
 
-To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you’ll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here’s how it works for Bootstrap and Floating UI:
+To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you’ll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here’s how it works for Bootstrap, Floating UI, and Vanilla Calendar Pro:
 
 ```html
 <!doctype html>
@@ -91,6 +94,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to
     {
       "imports": {
         "@floating-ui/dom": "[[config:cdn.floating_ui_esm]]",
+        "vanilla-calendar-pro": "[[config:cdn.vanilla_calendar_pro_esm]]",
         "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@[[config:current_version]]/dist/js/bootstrap.esm.min.js"
       }
     }
@@ -108,7 +112,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to
 
 Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.
 
-Our dropdowns, popovers, and tooltips also depend on [Floating UI](https://floating-ui.com/).
+Our dropdowns, popovers, and tooltips also depend on [Floating UI](https://floating-ui.com/). Our datepicker also depends on [Vanilla Calendar Pro](https://vanilla-calendar.pro/).
 
 ## Data attributes
 
diff --git a/site/src/content/docs/guides/npm.mdx b/site/src/content/docs/guides/npm.mdx
@@ -26,10 +26,10 @@ We’re building a npm project with Bootstrap from scratch, so there are some pr
    npm init -y
    ```
 
-2. **Install Bootstrap.** Now we can install Bootstrap. We’ll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here.
+2. **Install Bootstrap.** Now we can install Bootstrap. We’ll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using dropdowns, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro.
 
    ```sh
-   npm i --save bootstrap @floating-ui/dom
+   npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro
    ```
 
 3. **Install additional dependencies.** In addition to Bootstrap, we need a few more dependencies to compile and post-process our CSS. Sass compiles our source `.scss` files into CSS, and Autoprefixer and PostCSS handle browser compatibility. We install the `postcss-cli` package so we can run PostCSS from the command line.
diff --git a/site/src/content/docs/guides/parcel.mdx b/site/src/content/docs/guides/parcel.mdx
@@ -32,10 +32,10 @@ We’re building a Parcel project with Bootstrap from scratch, so there are some
    npm i --save-dev parcel
    ```
 
-3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here.
+3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using dropdowns, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro.
 
    ```sh
-   npm i --save bootstrap @floating-ui/dom
+   npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro
    ```
 
 Now that we have all the necessary dependencies installed, we can get to work creating the project files and importing Bootstrap.
@@ -130,7 +130,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
 
    *You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.*
 
-2. **Import Bootstrap’s JS.** Add the following to `src/js/main.js` to import all of Bootstrap’s JS. Floating UI will be imported automatically through Bootstrap.
+2. **Import Bootstrap’s JS.** Add the following to `src/js/main.js` to import all of Bootstrap’s JS. Floating UI and Vanilla Calendar Pro will be imported automatically through Bootstrap.
 
    ```js
    // Import all of Bootstrap’s JS
diff --git a/site/src/content/docs/guides/quickstart.mdx b/site/src/content/docs/guides/quickstart.mdx
@@ -25,7 +25,7 @@ Get started using Bootstrap in seconds by including our production-ready CSS and
    </html>
    ```
 
-2. **Include Bootstrap’s CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Floating UI for positioning dropdowns, popovers, and tooltips) before the closing `</body>`. Learn more about [our CDN links]([[docsref:/getting-started/install#cdn]]).
+2. **Include Bootstrap’s CSS and JS.** Place the `<link>` tag in the `<head>` for our CSS, and the `<script>` tag for our JavaScript bundle (including Floating UI for positioning dropdowns, popovers, and tooltips, and Vanilla Calendar Pro for the datepicker) before the closing `</body>`. Learn more about [our CDN links]([[docsref:/getting-started/install#cdn]]).
 
    ```html
    <!doctype html>
@@ -43,10 +43,11 @@ Get started using Bootstrap in seconds by including our production-ready CSS and
    </html>
    ```
 
-   You can also include [Floating UI](https://floating-ui.com/) and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Floating UI.
+   You can also include [Floating UI](https://floating-ui.com/) and [Vanilla Calendar Pro](https://vanilla-calendar.pro/) and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Floating UI. If you don’t plan to use the datepicker, you can omit Vanilla Calendar Pro.
 
    ```html
    <script src="[[config:cdn.floating_ui]]" integrity="[[config:cdn.floating_ui_hash]]" crossorigin="anonymous"></script>
+   <script src="[[config:cdn.vanilla_calendar_pro]]" integrity="[[config:cdn.vanilla_calendar_pro_hash]]" crossorigin="anonymous"></script>
    <script src="[[config:cdn.js]]" integrity="[[config:cdn.js_hash]]" crossorigin="anonymous"></script>
    ```
 
diff --git a/site/src/content/docs/guides/vite.mdx b/site/src/content/docs/guides/vite.mdx
@@ -32,10 +32,10 @@ We’re building a Vite project with Bootstrap from scratch, so there are some p
    npm i --save-dev vite
    ```
 
-3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here.
+3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using dropdowns, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro.
 
    ```sh
-   npm i --save bootstrap @floating-ui/dom
+   npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro
    ```
 
 4. **Install additional dependency.** In addition to Vite and Bootstrap, we need another dependency (Sass) to properly import and bundle Bootstrap’s CSS.
@@ -148,7 +148,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
 
    *You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.*
 
-2. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Floating UI will be imported automatically through Bootstrap.
+2. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Floating UI and Vanilla Calendar Pro will be imported automatically through Bootstrap.
 
    ```js
    // Import our custom CSS
diff --git a/site/src/content/docs/guides/webpack.mdx b/site/src/content/docs/guides/webpack.mdx
diff --git a/site/src/libs/config.ts b/site/src/libs/config.ts
diff --git a/site/src/libs/data.ts b/site/src/libs/data.ts

Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,10 @@ const files = [`
`40`	`40`	`{`
`41`	`41`	`file: 'node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.min.js',`
`42`	`42`	`configPropertyName: 'floating_ui_hash'`
	`43`	`+ },`
	`44`	`+ {`
	`45`	`+ file: 'node_modules/vanilla-calendar-pro/index.js',`
	`46`	`+ configPropertyName: 'vanilla_calendar_pro_hash'`
`43`	`47`	`}`
`44`	`48`	`]`
`45`	`49`
Original file line number	Diff line number	Diff line change
`@@ -202,13 +202,15 @@`
`202`	`202`	`"shim": {`
`203`	`203`	`"js/bootstrap": {`
`204`	`204`	`"deps": [`
`205`		`- "@floating-ui/dom"`
	`205`	`+ "@floating-ui/dom",`
	`206`	`+ "vanilla-calendar-pro"`
`206`	`207`	`]`
`207`	`208`	`}`
`208`	`209`	`},`
`209`	`210`	`"dependencies": {},`
`210`	`211`	`"peerDependencies": {`
`211`		`- "@floating-ui/dom": "^1.7.0"`
	`212`	`+ "@floating-ui/dom": "^1.7.0",`
	`213`	`+ "vanilla-calendar-pro": "^3.1.0"`
`212`	`214`	`}`
`213`	`215`	`},`
`214`	`216`	`"overrides": {`