36 Best Free Bootstrap Datepicker Examples 2026
These 36 Bootstrap datepicker examples cover pop-up and inline calendars, date range pickers, a date and time picker and booking forms with check-in and check-out dates, plus five 2026 snippets that put date pickers inside real booking flows. The Colorlib ones come with live demos and free downloads.
The 13 Colorlib calendars and booking forms in the main list were rebuilt as dependency-free HTML, CSS and vanilla JavaScript: no jQuery, no datepicker plugin and no moment.js. The five 2026 snippets are built the same way. All 18 keep their look on their own or inside Bootstrap 4, 5 and 6 projects, and are free for personal and commercial use under CC BY 3.0 as long as you keep the credit link. The 18 CodePen demos by other developers carry their own licences and may load jQuery or a datepicker plugin, so check each pen’s settings before you copy it.
Best Bootstrap Datapicker Examples & Templates
Calendar V09 by Colorlib
Let the name of our datepicker alternatives not fool you, as we released them in conjunction with our complete collection of calendar templates.
But let’s dive right into it.
Instead of picking the appropriate date, this free snippet goes the extra mile with time selection. When you click on the bar, a collection of options opens with shortcuts at the bottom.
You can also use the chevron pointing upwards to add seconds or hit the X sign to close the date picker. It keeps its look but no longer needs its plugin or moment.js, and the download dropped from 311 KB to 63 KB.
Calendar V12
Calendar V12 is a free datepicker with a modern and minimalist layout that works on its own or inside any Bootstrap project. Due to its neat appearance, you can effortlessly integrate it into different website themes and application designs.
The widget features a hover effect, a button for today’s date, an option to clear selection, and a close button.
It conveniently displays the month and year at the top, with left and right arrows for conveniently jumping to the next or previous month.
Calendar V13
If you offer your users the option to pick a date range for your services, bookings, or whatever, Calendar V13 is the right choice. This date range picker features two widgets, making it super convenient to pick the right dates, with the mouse or the keyboard.
The design of the free snippet is the same as the one above sports, meaning minimal and to the point.
When the user selects the date, it appears in a day/month/year format in the bar. They can also quickly clear the selection or choose today’s date with a single click.
Calendar V14
If you’re looking for a minimalist datepicker for your Bootstrap or plain HTML project that does the job well, Calendar V14 will deliver a great result.
This tool works well out of the box due to its simplicity in any web design. This is a datepicker without any fancy features, additional options, or reset buttons.
Download it, embed it, and that’s it!
Calendar V15
This calendar date range selector is handy for online bookings, whether for a hotel room, a car or something else.
The design is very straightforward, so you won’t need to change anything. Instead, use it out of the box. However, you can change the color of the highlighted date or go with the default version.
It works on mobile and desktop devices and no longer needs a date plugin or moment.js, so the download is 170 KB instead of 1.3 MB.
You can achieve similar functionality using WordPress calendar plugins.
Calendar V16
Keep things minimal yet bold with this inline calendar/datepicker, which you can embed into your project or application at free will.
The clean look appears beautiful on different screen sizes for your users’ enjoyment.
The design structure features month and year at the top, followed by weekdays from Sunday to Saturday and dates. A user can also use left and right arrows to pick different months.
Calendar V17
Here is a fresh, plugin-free template featuring an inline calendar with a result bar on top. Once the user selects a date, it appears in the bar as month, day, or year.
The result bar is empty by default, appearing with a call-to-action text, urging the user to pick the date. What’s more, the calendar comes with a pre-selected today’s date.
The layout is flexible and mobile-responsive, and the code is plain HTML, CSS and vanilla JavaScript, so it drops into a Bootstrap 4, 5 or 6 page as easily as a site without a framework.
Calendar V11
Calendar V11 is a neat pop-up datepicker that keeps a minimal presence in your application until the user clicks the field. It works with or without Bootstrap and is mobile-ready.
It comes with a shortcut for today’s date, a clear function and a close button. The rebuilt version keeps its look without the old plugin or moment.js, cutting the download from 1.2 MB to 171 KB.
Calendar V18
Calendar V18 combines an inline calendar with a result area and a date range function, which makes it a good fit for bookings and rentals.
The date picker is plain JavaScript now, with no plugin or moment.js behind it, and the snippet works on its own or inside a Bootstrap 4, 5 or 6 layout.
Hotel reservation form with check-in and check-out date pickers
If your datepicker is for hotel stays, start with a form that already has it in place. Colorlib Booking Form V3 features date pickers for check-in and check-out, plus fields for the number of guests and kids.
It is HTML and CSS with a few lines of vanilla JavaScript: no jQuery, no Bootstrap files and no plugins.
Book a room form with date pickers
Colorlib Booking Form V8 is a book-a-room form with date pickers, drop-downs and a fluid structure that adapts to mobile and desktop devices.
Its floating labels need no library, and the whole form works on its own or dropped into a Bootstrap project.
Dark hotel booking widget with check-in and check-out dates
Colorlib Booking Form V16 is a dark hotel booking widget built around check-in and check-out dates, followed by rooms, adults and children fields.
The rebuilt snippet loads no jQuery, no Bootstrap files and no plugins, only a few lines of vanilla JavaScript.
Car rental booking form with date pickers
Pick-up and return dates are the heart of any car rental form. Colorlib Booking Form V4 brings multiple fields, date pickers and drop-downs for car and other vehicle rentals.
It is plain HTML and CSS with a little vanilla JavaScript, and looks the same on its own or inside a Bootstrap 4, 5 or 6 project.
Bootstrap datepicker example by a CodePen user
This is a free Bootstrap datepicker example. A CodePen user developed it. It’s a fully customizable template. You can make changes to it according to your preferences.
This example provides an input field with the placeholder text’ dd.mm.yyyy’. You can see a small icon on the right side of this field. Upon clicking this input field, a current month and year calendar appears. It shows all the dates of the current month. The user can also bring this calendar by clicking the small icon on the right side.
When you select a date, it is highlighted with blue in the calendar. The background color of the selected date becomes blue. When you click a date, the date will appear immediately in the input field.
Check-in and check-out datepicker
This is another great Bootstrap datepicker example developed by Amanda Louise Acosta Morais. As the name suggests, this template allows the user to select a check-in and check-out date.
This template has two input fields, with the placeholder texts ‘Check-In’ and ‘Check-Out’. When the user clicks on them, a calendar appears so that the user can select a date.
Small calendar icons with placeholder texts hint to the user that datepickers will open upon clicking the input fields.
Bootstrap datepicker by Sreekanth Are
This is a very useful datepicker template made by Sreekanth Are. It has a nice, clean user interface, and in the screenshot, you can see an input field.
A date is placed in the input field upon selection. Users can see the current date in the input field when they click on it. When the user clicks on the calendar icon, a datepicker appears.
The date format that has been used is ‘yyyy-mm-dd’.
Bootstrap datepicker with material input
This datepicker example made by Salah Uddin has a material look. The webpage has three input fields. When the user clicks on the second input field, a very modern datepicker will appear.
The functionality is the same as the other datepickers. The only difference is that the design is a lot better. It looks very cool. This kind of modern datepicker template will give your web app users an amazing user experience.
Your website users will love this amazing datepicker. So if you think this template is good enough, you can use it on your website.
Bootstrap datepicker by Vaidehi Baviskar
This is a cool Bootstrap datepicker template developed by a CodePen user named Vaidehi Baviskar. As you can see from the screenshot of this example, there’s a heading above the input field, ‘Select Date:.’
It tells the user to pick a date. By default, the current date is displayed in the input field. When you click on the input field or the small icon, the datepicker appears.
You can see all the dates from the current month in this datepicker tool.
You can select a date from this tool and the selected date will appear in the input field.
Bootstrap datepicker by a CodePen user
This is a very simple datepicker example. It looks very similar to the previous example. In this example, there are two input fields with two datepickers.
In this datepicker example, the current date is highlighted with a yellow background, and when the user clicks on a particular date, its background color changes to blue.
As the current date is highlighted, it becomes easy for the user to quickly find it from this tool and easily select a date. If they want to select the current date, they can quickly do it as it is highlighted.
They can instantly spot the current date from all the dates in the current month.
Datepicker template by Jowi Englis
This is a standard datepicker example made by Jowi Englis, a CodePen user. As we can see from the screenshot, there’s a heading above the input field, ‘Calendar date:’.
The calendar icon in the input field looks cool. The placeholder text is ‘Select a Date,’ which is a very appropriate caption for this datepicker. You can always change it to something more meaningful and appropriate.
When you click on the input field, a beautiful datepicker highlights the current date with a blue background.
From this datepicker, your website users can not only select a date from the current month but also a date from a different month and a different year.
Bootstrap datepicker by Richard Bailey
This is an awesome Bootstrap datepicker example developed by Richard Bailey. This datepicker template will allow web app users to select a date range. So there are two datepickers provided in this example.
There are two input fields, clicking each of them displays a datepicker. You can use this free template if you want your website visitors to select a date range.
As it’s fully customizable, you can enhance the design by modifying the code. When the user selects two dates from the datepickers, the date range appears on the webpage, just below the input fields.
Bootstrap datepicker by Jose Castillo
If you need a datepicker for your website, you no longer have to make one from scratch. You can download this template and integrate it into your website.
You can tweak the design so that it looks better. As seen from the above screenshot, there are two input fields. When you click on any one, a datepicker appears on the screen.
The current date has a yellow background. So the user can quickly identify it from the list of dates shown in the datepicker.
Bootstrap datepickers by Valentin
This pen has two input fields with two datepickers. When you click on an input field, a datepicker opens very smoothly, causing a cool visual effect.
Such visual effects greatly enhance the user experience. If you’re looking for a cool datepicker example, this template is an awesome one designed with Bootstrap.
To take a closer look at this example, click the ‘Preview’ button below and see a nice preview of this example.
Bootstrap datepicker by Atanas Atanasov
This is a beautiful example of a free Bootstrap datepicker. If you’re looking for a very standard datepicker, use this one.
When you click on the calendar icon, the datepicker appears. Although this datepicker example does not highlight the current date, it looks very simple and powerful.
When you select a particular date, you can see it in the input field. You can add a heading above the input field if you require it.
Bootstrap datepicker by M Gambill
This is a cool datepicker example developed by M Gambill. There’s a text field where you can enter some text. Above the text field, there’s a heading with ‘Enter a date’. It tells the user to enter a date.
When you click on the text field, a datepicker appears. It is displayed in the text field when you click on a date. There’s an area below the text field for showing the output. In that area, you can see a text called ‘Date is:’.
Bootstrap datepicker by tuanitpro
This Bootstrap datepicker example gives you a simple text box. When you click on it, a datepicker appears. The selected date is shown in the text field: ‘8/22//2025’. If you prefer a different date format, change the date format from the code.
And if you need to improve the design, you can do it.
As it’s an open-source code sample, you can make changes to the code to improve the template’s appearance on your website.
Datepicker template by Priyank Panchal
This is a high-quality datepicker template developed by Priyank Panchal. It has two input fields, a ‘From’ field and a ‘To’ field, which allow the user to select a date range.
When you click on the input fields, datepickers come up.
The selected dates are shown in the input fields. This example also has a button. When you click it, you can see a message. You can specify what will happen when the user clicks the button from the code.
If you do not require this button, you can remove it.
Datepicker by Jacob Montgomery
This datepicker example has a button, clicking which opens up a modal. Then, you can see a text field; clicking on it shows a date picker. The heading placed above this input field is ‘Datepicker’.
If you use this template, change the heading to something more appropriate or remove it if you think it’s unnecessary.
There’s a ‘Close’ button below the text field. Clicking it closes the modal.
Datepicker example by Javier Burón
This is another cool datepicker example made by Javier Burón. As you can see from the screenshot above, there’s a text field above for a heading.
When the user clicks on the input field, they see a datepicker, which they can use to select a date. When a date is selected, it’s shown in the text field. If you integrate this template into your website, you should change it to something more meaningful and suitable.
The output is shown in this way: ‘Result: 09/22/2029’. It’s also shown as an output below the text field. Consider omitting the output section if you do not require it.
More info / DownloadBootstrap datepicker by Peter Schöning
This amazing free Bootstrap datepicker example, created by Peter Schöning, features a lovely green background.
This example includes a text field that opens a date picker. It shows you the dates of the current month, which you can use for your selection.
You can also select a date from a different month from the current year or a different year. The selected date is shown in this text field: ’08/15/2029′.
You can change the date format from the code, tailoring it to your needs.
Datepicker example by a CodePen user
This pen is a search form. It features a text field with the heading ‘Some Criteria’, where users must enter their search criteria. The user then needs to enter a date range using the provided input fields.
When the input fields are clicked, datepickers appear, using which the user can select dates for the date range. When the user specifies the date range, they can perform a search by clicking the ‘Search’ button.
The user can also clear the input fields by clicking the ‘Clear’ button. Clicking the ‘Search’ button will not show you any search results as this is just a simple example demonstrating datepickers.
It’s not a complete application.
More 2026 date and time pickers from Colorlib
Date pickers inside real booking flows, from our 2026 snippets: each uses the browser’s own date input or a small calendar grid, with time slots generated for the chosen day.
Appointment Form V04: Consultation call scheduler with month calendar and time-zone conversion
A three-pane scheduler for booking a 30-minute video call: a host panel with the call details, a month calendar built in JavaScript and a list of start times for the chosen day. Slots are defined in the host's New York time zone and shown in the visitor's own zone, detected with Intl, with a 12h/24h switch. Choosing a time leads to a short details step and then a confirmation card with an .ics download.
Best for: consultants, coaches, agencies and sales demo booking. Plain HTML and CSS with a few lines of vanilla JavaScript, a 210 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V01: Doctor and clinic appointment request with filtered doctors and time slots
A clinic booking form with a department select that filters the doctor list, a date picker that rejects weekends and a grid of time-slot chips generated for the chosen day. Some slots show as taken and past times are hidden for today. A dark teal side column holds the clinic's hours, address, phone and a short what-to-bring list, and a confirmation panel echoes the doctor, date and time.
Best for: clinics, GP practices and medical centres. Plain HTML and CSS with a few lines of vanilla JavaScript, a 381 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V08: Fine-dining table reservation with time slots and a ticket confirmation
A dark restaurant reservation form with a candle-lit photo panel beside it. Guests set the party size with a stepper, pick a date and then choose from dinner time slots between 17:30 and 22:00, where some slots show as full for each date. Seating is chosen from icon cards, with an occasion menu, special requests with a character counter and contact details. A confirmed booking is shown as a reservation ticket with a reference number.
Best for: restaurant, bistro and wine bar reservation pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 442 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Appointment Form V07: Tutoring lesson booking with weekly repeat and bundle pricing
A lesson booking form for a tutoring service with subject chips, a segmented level picker and lesson lengths whose prices follow the chosen level. Choosing a preferred weekday suggests the next matching first-lesson date and keeps the date on that weekday. A repeat-weekly switch reveals a weeks stepper and a preview of every lesson date, and the summary multiplies the per-lesson price by the weeks with a small bundle discount.
Best for: tutoring, music lesson and coaching booking pages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 175 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
Hero V12: Split travel hero with a stay search bar overlapping the photo
A split hero for a holiday-rental site, with the headline, intro and three proof points on the left and a large alpine lake photo on the right. A white search bar for location, check-in, check-out and guests overlaps the bottom of the photo and uses native text, date and select inputs with visible labels. Script prefills sensible dates, keeps check-out at least one night after check-in, validates with the browser and reports the search in a status region.
Best for: travel, holiday rental, hotel and real estate homepages. Plain HTML and CSS with a few lines of vanilla JavaScript, a 364 KB download, and it works on its own or inside a Bootstrap 4, 5 or 6 project.
How to choose a Bootstrap datepicker
Consider the native date input first. <input type="date"> opens the phone’s own calendar, follows the visitor’s locale and needs no script; Colorlib Booking Forms V3, V4, V8 and V16 use it. Reach for a custom picker when you need a range on one calendar, disabled dates or a look the native control can’t give you.
Use a range picker for ranges. Two unrelated fields leave people to check that check-out comes after check-in. Calendar V13, V15 and V18 handle a date range in one widget.
Make the format unambiguous. 08/09/2026 is August in the US and September in most other countries. Show the month name, or keep the value as ISO yyyy-mm-dd and display it with Intl.DateTimeFormat in the visitor’s locale.
Keep typing and the keyboard working. Let people type a date as well as click one, and make the calendar usable with the arrow keys; Calendar V13 works with the mouse or the keyboard. A picker that only responds to clicks locks out keyboard and screen reader users.
Block dates you can’t serve. Disable past dates, closed days and full slots in the picker, then check them again on the server. Appointment Form V01 rejects weekends and hides past times for today, and V04 shows the host’s slots in the visitor’s own time zone.
Frequently asked questions
Does Bootstrap 5 include a datepicker?
No. Bootstrap has never shipped a datepicker component. The usual options are the native <input type="date"> styled with .form-control, a dependency-free picker like the Colorlib ones above, or a third-party library. The popular bootstrap-datepicker plugin is a jQuery plugin, so it still needs jQuery.
Do the Colorlib datepickers need jQuery or moment.js?
No. They are plain HTML, CSS and vanilla JavaScript, and the old plugin and moment.js were removed in the September 2026 rebuild. Calendar V09 still offers time selection alongside the date.
Can I use them in commercial projects?
Yes. Colorlib snippets are free for personal and commercial use under CC BY 3.0; keep the credit link. For the CodePen demos, check each pen’s licence and credit its author.
How do I change the date format?
A native date input always submits yyyy-mm-dd and displays the date in the visitor’s own format, so there is nothing to change. In a custom picker the display format is set in its script; whatever you show, submit ISO yyyy-mm-dd so your server reads every date the same way.
Final thoughts
Start with Calendar V11 for a compact pop-up picker, Calendar V13 or V18 for date ranges and Appointment Form V04 if you book calls across time zones. For full calendar layouts, see our Bootstrap calendars, and for complete time-slot booking forms, our appointment form templates.
Related Posts
Comments (0)