Collection of free Bootstrap datepicker and timepicker code examples from codepen and other resources. Update of March 2020 collection. 13 new items.

Related Articles

  1. jQuery Datepickers and Timepickers
  2. ReactJS Datepickers
Demo image: Bootstrap 5 Datepicker

Author

  • mike foskett

Made with

  • HTML / CSS / JS

About a code

Bootstrap 5 Datepicker

Date-picker for Bootstrap 5, using vanilla JavaScript with vanillajs-datepicker. Examples of floating labels, input groups and mixed.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap-icons.css, datepicker.css, datepicker-full.js

Demo image: Bootstrap Calendar Datepicker #17

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Calendar Datepicker #17

This is a full-blown free inline calendar template with the result/exact date selection at the top of the block.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, rome.js

Bootstrap version: 4.5.3

Demo image: Bootstrap Calendar Datepicker #16

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Calendar Datepicker #16

Picking dates becomes a piece of cake with this free minimalist calendar template based on Bootstrap framework.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, rome.js

Bootstrap version: 4.5.3

Demo image: Bootstrap Calendar Datepicker #14

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Calendar Datepicker #14

Keep it clean and minimal on your website or application with this free desktop datepicker template.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, rome.js

Bootstrap version: 4.5.3

Demo image: Bootstrap Calendar Datepicker #13

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Calendar Datepicker #13

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, rome.js

Bootstrap version: 4.5.3

Demo image: Bootstrap Calendar Datepicker #12

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Calendar Datepicker #12

A modern, simple and responsive free date picker template based on Bootstrap framework.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, rome.js

Bootstrap version: 4.5.3

Demo image: Bootstrap Calendar Datepicker #09

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Calendar Datepicker #09

A full-blown free calendar date picker template with an option to specify the exact time.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js, bootstrap-datepicker.js

Bootstrap version: 4.5.3

Demo image: Bootstrap 4 Datepicker Input Form with Button

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Datepicker Input Form with Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, datedropper.css, jquery.js, datedropper.js

Bootstrap version: 4.4.1

Demo image: Bootstrap 4 Green Themed Datepicker with Date Range

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Green Themed Datepicker with Date Range

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap-datepicker.css, jquery.js, bootstrap-datepicker.js

Bootstrap version: 4.4.1

Demo image: Bootstrap 4 Orange Themed Datepicker with Date Range

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 orange themed datepicker with date range

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap-datepicker.css, jquery.js, bootstrap-datepicker.js

Bootstrap version: 4.3.1

Demo image: Bootstrap 4 Pink Themed Custom Datepicker

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Pink Themed Custom Datepicker

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap-datepicker.css, jquery.js, bootstrap-datepicker.js

Bootstrap version: 4.4.1

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Blue Themed Date Picker

Bootstrap 4 blue themed date picker with date range and week number.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.3.1

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

About a code

Table with Custom Time

Bootstrap 4 business hours table with custom time.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.3.1

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Dark Themed Date and Time Picker

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.3.1

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Date Range Datepicker

Bootstrap 4 date range datepicker with two months shown.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, daterangepicker.css, bootstrap.js, jquery.js, moment.js, daterangepicker.js

Bootstrap version: 4.3.1

Author

  • Omkar Bailkeri

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Green Themed Datepicker

Bootstrap 4 green themed datepicker with date range.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap-datepicker.css, font-awesome.css, bootstrap.js, jquery.js, bootstrap-datepicker.js

Bootstrap version: 4.4.1

Demo image: Bootstrap 4 Datepicker Using HTML and jQuery Plugin

Author

  • Hitesh Chauhan

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Datepicker Using HTML and jQuery Plugin

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, datedropper.css, jquery.js, datedropper.js

Bootstrap version: 4.3.1

Demo image: Bootstrap Datepicker

Author

  • Ondrej

Made with

  • HTML / CSS / JS

About a code

Bootstrap Datepicker

Create a nicely styled reservation form using Bootstrap 4 and Bootstrap datepicker.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap-datepicker.css, bootstrap.js, jquery.js, bootstrap-datepicker.js

Bootstrap version: 4.3.1

Demo image: Bootstrap Datepicker

Author

  • Salah Uddin

Made with

  • HTML / CSS / JS

About a code

Bootstrap Datepicker

Bootstrap datepicker Material look with Material input.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap-datepicker.css, jquery.js, bootstrap-datepicker.js

Bootstrap version: 3.3.7

Author

  • John Fink

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Bootstrap Date/Time Picker

Custom bootstrap styling for Eonasdan's DateTimePicker.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap-datetimepicker.css, bootstrap.js, jquery.js, moment.js, bootstrap-datetimepicker.js

Bootstrap version: 4.1.3

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Bootstrap Datepicker

Using a Bootstrap datepicker and the getDate method to add a second string with different date formatting.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap-datepicker.css, bootstrap-datepicker.js, jquery.js, jquery-dateFormat.js

Demo image: AB Datepicker

Author

  • Jacques Archim├Ęde

Made with

  • HTML / CSS / JS

About a code

AB Datepicker

An accessible and Bootstrap compatible datepicker.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 3.3.5

Author

  • T00rk

Made with

  • HTML / CSS / JS

About a code

Bootstrap Material DateTimePicker

Originaly designed for Bootstrap Material, the V2.0 is now completely standalone and responsive.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 3.3.2

Author

  • Munim Munna

Made with

  • HTML / CSS / JS

About a code

Bootstrap 3/4 Date/Time Picker with Clock-Like Time-Picker

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Demo image: JTSage-DateBox

Author

  • J.T. Sage

Made with

  • HTML / CSS / JS

About a code

JTSage-DateBox

A multi-mode date and time picker for Bootstrap (3 & 4)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.3.1