Collection of free Bootstrap datepicker and timepicker code examples
Welcome to our collection of Bootstrap examples! In this carefully curated compilation, we have gathered a wide range of code snippets that demonstrate the versatility and power of the Bootstrap framework.
Bootstrap 5 Datepicker
mike foskett | October 8, 2021
HTML / CSS / JS
About a code
Date-picker for Bootstrap 5, using vanilla JavaScript with vanillajs-datepicker. Examples of floating labels, input groups and mixed.
Chrome, Edge, Firefox, Opera, Safari
yes
bootstrap-icons.css, datepicker.css, datepicker-full.js
Bootstrap Calendar Datepicker #17
rokr | February 17, 2021
HTML / CSS / JS
About a code
This is a full-blown free inline calendar template with the result/exact date selection at the top of the block.
Chrome, Edge, Firefox, Opera, Safari
yes
jquery.js, rome.js
4.5.3
Bootstrap Calendar Datepicker #16
rokr | February 17, 2021
HTML / CSS / JS
About a code
Picking dates becomes a piece of cake with this free minimalist calendar template based on Bootstrap framework.
Chrome, Edge, Firefox, Opera, Safari
yes
jquery.js, rome.js
4.5.3
Bootstrap Calendar Datepicker #14
rokr | February 17, 2021
HTML / CSS / JS
About a code
Keep it clean and minimal on your website or application with this free desktop datepicker template.
Chrome, Edge, Firefox, Opera, Safari
yes
jquery.js, rome.js
4.5.3
Bootstrap Calendar Datepicker #12
rokr | February 17, 2021
HTML / CSS / JS
About a code
A modern, simple and responsive free date picker template based on Bootstrap framework.
Chrome, Edge, Firefox, Opera, Safari
yes
jquery.js, rome.js
4.5.3
Bootstrap Calendar Datepicker #09
rokr | February 17, 2021
HTML / CSS / JS
About a code
A full-blown free calendar date picker template with an option to specify the exact time.
Chrome, Edge, Firefox, Opera, Safari
yes
font-awesome.css, jquery.js, bootstrap-datepicker.js
4.5.3
Bootstrap 4 Blue Themed Date Picker
Omkar Bailkeri | January, 2020
HTML / CSS / JS
About a code
Bootstrap 4 blue themed date picker with date range and week number.
Chrome, Edge, Firefox, Opera, Safari
yes
bootstrap.css, font-awesome.css, bootstrap.js, jquery.js
4.3.1
Table with Custom Time
Omkar Bailkeri | January, 2020
HTML / CSS / JS
About a code
Bootstrap 4 business hours table with custom time.
Chrome, Edge, Firefox, Opera, Safari
yes
bootstrap.css, font-awesome.css, bootstrap.js, jquery.js
4.3.1
Bootstrap 4 Date Range Datepicker
Omkar Bailkeri | January, 2020
HTML / CSS / JS
About a code
Bootstrap 4 date range datepicker with two months shown.
Chrome, Edge, Firefox, Opera, Safari
yes
bootstrap.css, daterangepicker.css, bootstrap.js, jquery.js, moment.js, daterangepicker.js
4.3.1
Bootstrap 4 Green Themed Datepicker
Omkar Bailkeri | January, 2020
HTML / CSS / JS
About a code
Bootstrap 4 green themed datepicker with date range.
Chrome, Edge, Firefox, Opera, Safari
yes
bootstrap.css, bootstrap-datepicker.css, font-awesome.css, bootstrap.js, jquery.js, bootstrap-datepicker.js
4.4.1
Bootstrap Datepicker
Ondrej | October 22, 2019
HTML / CSS / JS
About a code
Create a nicely styled reservation form using Bootstrap 4 and Bootstrap datepicker.
Chrome, Edge, Firefox, Opera, Safari
yes
bootstrap.css, font-awesome.css, bootstrap-datepicker.css, bootstrap.js, jquery.js, bootstrap-datepicker.js
4.3.1
Bootstrap Datepicker
Salah Uddin | November 22, 2017
HTML / CSS / JS
About a code
Bootstrap datepicker Material look with Material input.
Chrome, Edge, Firefox, Opera, Safari
yes
bootstrap-datepicker.css, jquery.js, bootstrap-datepicker.js
3.3.7
Bootstrap Date/Time Picker
John Fink | October 7, 2016
HTML (Pug) / CSS (SCSS) / JS
About a code
Custom bootstrap styling for Eonasdan's DateTimePicker.
Chrome, Edge, Firefox, Opera, Safari
yes
bootstrap.css, font-awesome.css, bootstrap-datetimepicker.css, bootstrap.js, jquery.js, moment.js, bootstrap-datetimepicker.js
4.1.3
Bootstrap Datepicker
Ryan Mulligan | April 9, 2016
HTML (Pug) / CSS (SCSS) / JS
About a code
Using a Bootstrap datepicker and the getDate method to add a second string with different date formatting.
Chrome, Edge, Firefox, Opera, Safari
yes
bootstrap-datepicker.css, bootstrap-datepicker.js, jquery.js, jquery-dateFormat.js
Bootstrap 3/4 Date/Time Picker with Clock-Like Time-Picker
Munim Munna | December 18, 2012
HTML / CSS / JS
About a code
A clock-like time-picker has been introduced into it and the widget is optimized to make it compatible to both Bootstrap 3 and 4 versions.
Chrome, Edge, Firefox, Opera, Safari
yes
4.0.0
Discover Our Extensive Snippet Library
This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.
HTML Snippets.
Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.
CSS Snippets.
Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations
JavaScript Snippets.
Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms
Bootstrap Snippets.
Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components
Tailwind Snippets.
Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to
jQuery Snippets.
Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations
Let's craft a visual identity that ignites passion and loyalty. ✨