Skip to content

Booking Date Picker with Disabled Dates

Bootstrap 5 check-in and check-out date range picker with a two-month calendar, booked dates, minimum stay and price total.

Also known as: booking calendar, reservation calendar, check-in check-out date picker, date range picker, hotel booking calendar

Bootstrap 5 Date Pickers Responsive Dark #booking #calendar #dark #date-picker #form

Booking Date Picker with Disabled Dates live demo

Open in new tab

Bootstrap 5 code (HTML, CSS, JS)

A Bootstrap 5 booking date picker with check-in and check-out fields, a two-month calendar and blocked dates that cannot be booked. It suits vacation rentals, hotels, campsites and any reservation form that needs a valid date range.

How it works

The root section.bdp holds a form.bdp-card with a header, two .bdp-field buttons (check-in and check-out), the calendar area .bdp-months, a legend and a footer with the nights, the total price, "Clear dates" and "Reserve". The script renders two months as Bootstrap columns; under 768px the second month is hidden with d-none d-md-block, so phones see one month.

Each day is a button.bdp-day inside a table.bdp-grid. Past dates and the dates listed in data-bdp-booked get aria-disabled="true" and the striped .is-booked style. The first click sets check-in, the second sets check-out. While choosing check-out, the script finds the first booked night after check-in and marks later days with .is-out-of-reach, so a stay can never cross a booked date. The booked day itself stays selectable as the departure day, because guests leave before the next guest arrives. Stays shorter than data-bdp-min-nights are blocked. Hovering shows the future range with .is-preview; the chosen range uses .is-start, .is-in-range and .is-end. The selected dates are written to the hidden inputs checkin and checkout in ISO format, and the submit handler only simulates a request.

Customization

  • data-bdp-booked on .bdp: comma-separated booked dates; use offsets from today (+5), ISO dates (2026-12-24) or ranges (+5..+7).
  • data-bdp-start and data-bdp-end on .bdp: the preselected stay; remove both to start empty.
  • data-bdp-min-nights on .bdp: the minimum stay, e.g. 3 for long weekends.
  • data-bdp-rate and data-bdp-fee on .bdp: the nightly price and cleaning fee used in the footer total.
  • --bdp-accent in .bdp: the teal used for selected days, the Reserve button and the active field.
  • --bdp-day in .bdp: the size of the round day buttons.
  • The submit handler in script.js: replace the timeout with a fetch() that sends checkin and checkout to your booking API.

Use cases

  • Hotels and vacation rentals: guests pick check-in and check-out in one two-month calendar
  • Campsites and holiday homes: booked nights are blocked so stays never overlap
  • Reservation forms: a minimum stay rule and a live price total before the guest books

Accessibility

Each month is a role="grid" table labelled by its month heading, with full weekday names in the abbr attribute. Day buttons carry labels such as "Saturday, October 24, 2026, check-in" or "unavailable". Only one day is in the tab order (roving tabindex); Arrow keys move by day and week, Home and End jump within the week, and Page Up and Page Down change month. The two field buttons use aria-pressed to show which date is being edited. Selections and errors are announced through the role="status" element .bdp-status. Focus rings are yellow for strong contrast on the dark navy card.

Usage notes

Requires Bootstrap 5 and Bootstrap Icons. Load real availability from your server and write it into data-bdp-booked before the script runs; each .bdp instance works on its own.

Booking Date Picker with Disabled Dates at a glance

Framework
Bootstrap 5
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Bootstrap 5, Bootstrap Icons
Layout
Responsive, works on mobile, dark design
Category
Date Pickers
License
Free for personal and commercial use

Questions about this template

Can I use the Booking Date Picker with Disabled Dates code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 5 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  • <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
Booking Date Picker with Disabled Dates – Bootstrap 5 date pickers component screenshot
Booking Date Picker with Disabled Dates · Bootstrap 5 Date Pickers

More Date Pickers

Date Picker Dropdown – Tailwind CSS date pickers preview

Date Picker Dropdown

Accessible Tailwind CSS date picker: a text input with a calendar popup, keyboard grid navigation, locale-aware labels and min/max dates.

Tailwind CSS Date Pickers