The MIT License (MIT)
-Copyright (c) 2011-2025 The Bootstrap Authors
+Copyright (c) 2011-2026 The Bootstrap Authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
## Copyright and license
-Code and documentation copyright 2011-2025 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Code and documentation copyright 2011-2026 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
/*!
* Script to build our plugins to use them separately.
- * Copyright 2020-2025 The Bootstrap Authors
+ * Copyright 2020-2026 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
/*!
* Script to update version number references in the project.
- * Copyright 2017-2025 The Bootstrap Authors
+ * Copyright 2017-2026 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
* Remember to use the same vendor files as the CDN ones,
* otherwise the hashes won't match!
*
- * Copyright 2017-2025 The Bootstrap Authors
+ * Copyright 2017-2026 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
* - Easy to configure with rule-based system
* - Better integration with Node.js build tools
*
- * Copyright 2017-2025 The Bootstrap Authors
+ * Copyright 2017-2026 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
/*!
* Script to create the built examples zip archive;
* requires the `zip` command to be present!
- * Copyright 2020-2025 The Bootstrap Authors
+ * Copyright 2020-2026 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
const inputEl = fixtureEl.querySelector('input')
const datepicker = new Datepicker(inputEl)
- const dates = ['2025-01-15']
+ const dates = ['2026-01-15']
datepicker.setSelectedDates(dates)
const inputEl = fixtureEl.querySelector('input')
const datepicker = new Datepicker(inputEl)
- const dates = ['2025-01-15']
+ const dates = ['2026-01-15']
datepicker.setSelectedDates(dates)
const result = datepicker.getSelectedDates()
- result.push('2025-01-20')
+ result.push('2026-01-20')
expect(datepicker.getSelectedDates()).toEqual(dates)
})
describe('options', () => {
it('should respect dateMin option', () => {
- fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" data-bs-date-min="2025-01-01">'
+ fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" data-bs-date-min="2026-01-01">'
const inputEl = fixtureEl.querySelector('input')
const datepicker = new Datepicker(inputEl)
- expect(datepicker._config.dateMin).toEqual('2025-01-01')
+ expect(datepicker._config.dateMin).toEqual('2026-01-01')
})
it('should respect dateMax option', () => {
- fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" data-bs-date-max="2025-12-31">'
+ fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" data-bs-date-max="2026-12-31">'
const inputEl = fixtureEl.querySelector('input')
const datepicker = new Datepicker(inputEl)
- expect(datepicker._config.dateMax).toEqual('2025-12-31')
+ expect(datepicker._config.dateMax).toEqual('2026-12-31')
})
it('should respect selectionMode option', () => {
const inputEl = fixtureEl.querySelector('input')
const datepicker = new Datepicker(inputEl)
- const result = datepicker._formatDate('2025-01-15')
+ const result = datepicker._formatDate('2026-01-15')
// Should be a string (format varies by system locale)
expect(typeof result).toEqual('string')
locale: 'en-US'
})
- const result = datepicker._formatDate('2025-01-15')
+ const result = datepicker._formatDate('2026-01-15')
- expect(result).toEqual('Jan 15, 2025')
+ expect(result).toEqual('Jan 15, 2026')
})
it('should format date with custom function', () => {
dateFormat: date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
})
- const result = datepicker._formatDate('2025-01-15')
+ const result = datepicker._formatDate('2026-01-15')
- expect(result).toEqual('2025-1-15')
+ expect(result).toEqual('2026-1-15')
})
it('should use en-dash for date ranges', () => {
locale: 'en-US'
})
- const result = datepicker._formatDateForInput(['2025-01-15', '2025-01-20'])
+ const result = datepicker._formatDateForInput(['2026-01-15', '2026-01-20'])
expect(result).toContain(' – ')
})
locale: 'en-US'
})
- const result = datepicker._formatDateForInput(['2025-01-15', '2025-01-20'])
+ const result = datepicker._formatDateForInput(['2026-01-15', '2026-01-20'])
expect(result).toContain(', ')
})
describe('input value parsing', () => {
it('should parse initial input value', () => {
- fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" value="2025-01-15">'
+ fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" value="2026-01-15">'
const inputEl = fixtureEl.querySelector('input')
const datepicker = new Datepicker(inputEl)
// Simulate VCP date click callback
datepicker._handleDateClick({
- context: { selectedDates: ['2025-01-15'] }
+ context: { selectedDates: ['2026-01-15'] }
}, new Event('click'))
})
})
const datepicker = new Datepicker(inputEl)
datepicker._handleDateClick({
- context: { selectedDates: ['2025-01-15'] }
+ context: { selectedDates: ['2026-01-15'] }
}, new Event('click'))
expect(inputEl.value).not.toEqual('')
const datepicker = new Datepicker(buttonEl)
datepicker._handleDateClick({
- context: { selectedDates: ['2025-01-15'] }
+ context: { selectedDates: ['2026-01-15'] }
}, new Event('click'))
expect(displayEl.textContent).not.toEqual('Select date')
const datepicker = new Datepicker(divEl)
datepicker._handleDateClick({
- context: { selectedDates: ['2025-01-15'] }
+ context: { selectedDates: ['2026-01-15'] }
}, new Event('click'))
- expect(hiddenInput.value).toEqual('2025-01-15')
+ expect(hiddenInput.value).toEqual('2026-01-15')
})
it('should auto-hide after single date selection', () => {
const hideSpy = spyOn(datepicker, 'hide')
datepicker._handleDateClick({
- context: { selectedDates: ['2025-01-15'] }
+ context: { selectedDates: ['2026-01-15'] }
}, new Event('click'))
setTimeout(() => {
const hideSpy = spyOn(datepicker, 'hide')
datepicker._handleDateClick({
- context: { selectedDates: ['2025-01-15', '2025-01-20'] }
+ context: { selectedDates: ['2026-01-15', '2026-01-20'] }
}, new Event('click'))
setTimeout(() => {
const hideSpy = spyOn(datepicker, 'hide')
datepicker._handleDateClick({
- context: { selectedDates: ['2025-01-15'] }
+ context: { selectedDates: ['2026-01-15'] }
}, new Event('click'))
setTimeout(() => {
const hideSpy = spyOn(datepicker, 'hide')
datepicker._handleDateClick({
- context: { selectedDates: ['2025-01-15'] }
+ context: { selectedDates: ['2026-01-15'] }
}, new Event('click'))
setTimeout(() => {
const hideSpy = spyOn(datepicker, 'hide')
- datepicker._maybeHideAfterSelection(['2025-01-15'])
+ datepicker._maybeHideAfterSelection(['2026-01-15'])
setTimeout(() => {
expect(hideSpy).not.toHaveBeenCalled()
<h2>With Min/Max Dates</h2>
<div class="row mb-4">
<div class="col-md-6">
- <label for="minMaxDatepicker" class="form-label">Only dates in 2025</label>
- <input type="text" class="form-control" id="minMaxDatepicker" data-bs-toggle="datepicker" data-bs-date-min="2025-01-01" data-bs-date-max="2025-12-31" placeholder="Select a date in 2025">
+ <label for="minMaxDatepicker" class="form-label">Only dates in 2026</label>
+ <input type="text" class="form-control" id="minMaxDatepicker" data-bs-toggle="datepicker" data-bs-date-min="2026-01-01" data-bs-date-max="2026-12-31" placeholder="Select a date in 2026">
</div>
</div>
const jsDatepickerEl = document.getElementById('jsDatepicker')
const jsDatepicker = new bootstrap.Datepicker(jsDatepickerEl, {
firstWeekday: 1,
- selectedDates: ['2025-01-15']
+ selectedDates: ['2026-01-15']
})
document.getElementById('showBtn').addEventListener('click', () => {
<repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
<icon>bootstrap.png</icon>
<license type="expression">MIT</license>
- <copyright>Copyright 2011-2025</copyright>
+ <copyright>Copyright 2011-2026</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<tags>css mobile-first responsive front-end framework web</tags>
<contentFiles>
<repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
<icon>bootstrap.png</icon>
<license type="expression">MIT</license>
- <copyright>Copyright 2011-2025</copyright>
+ <copyright>Copyright 2011-2026</copyright>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<tags>css sass mobile-first responsive front-end framework web</tags>
<contentFiles>
/*!
* Bootstrap #{$file} v6.0.0-dev (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
+ * Copyright 2011-2026 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
@mixin bsBanner($file) {
/*!
* Bootstrap #{$file} v6.0.0-alpha1 (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
+ * Copyright 2011-2026 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
}
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
+ * Copyright 2011-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
/*
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
+ * Copyright 2011-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
/*
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
+ * Copyright 2011-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
/*
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
+ * Copyright 2011-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2024-2025 The Bootstrap Authors
+ * Copyright 2024-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
/*
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
+ * Copyright 2011-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2024-2025 The Bootstrap Authors
+ * Copyright 2024-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</li>
<li class="breadcrumb-item" aria-current="page">
- <a class="breadcrumb-link active" href="#">2025</a>
+ <a class="breadcrumb-link active" href="#">2026</a>
</li>
</ol>
</nav>`} />
Restrict the selectable date range using `data-bs-date-min` and `data-bs-date-max`.
-<Example code={`<label for="datepicker2" class="form-label">Event date (2025 only)</label>
- <input type="text" class="form-control w-12" id="datepicker2" data-bs-toggle="datepicker" data-bs-date-min="2025-01-01" data-bs-date-max="2025-12-31" placeholder="Select a date in 2025">`} />
+<Example code={`<label for="datepicker2" class="form-label">Event date (2026 only)</label>
+ <input type="text" class="form-control w-12" id="datepicker2" data-bs-toggle="datepicker" data-bs-date-min="2026-01-01" data-bs-date-max="2026-12-31" placeholder="Select a date in 2026">`} />
### Multiple dates
Select a range of dates with `data-bs-selection-mode="multiple-ranged"`. Use `data-bs-selected-dates` to preselect a date range.
<Example code={`<label for="datepicker4" class="form-label">Select date range</label>
- <input type="text" class="form-control" id="datepicker4" data-bs-toggle="datepicker" data-bs-selection-mode="multiple-ranged" data-bs-selected-dates='["2025-06-10", "2025-06-18"]' placeholder="Select start and end dates…">`} />
+ <input type="text" class="form-control" id="datepicker4" data-bs-toggle="datepicker" data-bs-selection-mode="multiple-ranged" data-bs-selected-dates='["2026-06-10", "2026-06-18"]' placeholder="Select start and end dates…">`} />
### Multi-month date range
For selecting date ranges that span multiple months, combine `data-bs-selection-mode="multiple-ranged"` with `data-bs-display-months-count="2"` to show two months side-by-side, making it easier for users to select across month boundaries.
<Example code={`<label for="datepickerRangeTwoMonths" class="form-label">Select date range</label>
- <input type="text" class="form-control" id="datepickerRangeTwoMonths" data-bs-toggle="datepicker" data-bs-selection-mode="multiple-ranged" data-bs-display-months-count="2" data-bs-selected-dates='["2025-06-25", "2025-07-08"]' placeholder="Select start and end dates…">`} />
+ <input type="text" class="form-control" id="datepickerRangeTwoMonths" data-bs-toggle="datepicker" data-bs-selection-mode="multiple-ranged" data-bs-display-months-count="2" data-bs-selected-dates='["2026-06-25", "2026-07-08"]' placeholder="Select start and end dates…">`} />
## Options
// Using Intl.DateTimeFormat options
const datepicker = new bootstrap.Datepicker(element, {
dateFormat: { month: 'short', day: 'numeric', year: 'numeric' }
- // Output: "Dec 23, 2025 – Dec 28, 2025"
+ // Output: "Dec 23, 2026 – Dec 28, 2026"
})
// Using a custom function
vcpOptions: {
disableDatesPast: true, // Disable past dates
disableWeekdays: [0, 6], // Disable weekends
- disableDates: ['2025-12-25', '2025-12-26'], // Disable specific dates
- selectedHolidays: ['2025-01-01'], // Highlight holidays
+ disableDates: ['2026-12-25', '2026-12-26'], // Disable specific dates
+ selectedHolidays: ['2026-01-01'], // Highlight holidays
selectionTimeMode: 24 // Enable 24-hour time selection
}
})
/* Bootstrap Docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
+ * Copyright 2011-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
/*!
* Bootstrap Docs (https://getbootstrap.com/)
- * Copyright 2024-2025 The Bootstrap Authors
+ * Copyright 2024-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
+ * Copyright 2011-2026 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/