25 Bootstrap Datepickers and Timepickers (2023)

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
25 Bootstrap Datepickers and Timepickers (1)

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

25 Bootstrap Datepickers and Timepickers (2)

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

25 Bootstrap Datepickers and Timepickers (3)

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

25 Bootstrap Datepickers and Timepickers (4)

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

25 Bootstrap Datepickers and Timepickers (5)

Author

  • rokr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Calendar Datepicker #13

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

Responsive: yes

(Video) How To Use The Bootstrap Datepicker Plugin In jQuery

Dependencies: jquery.js, rome.js

Bootstrap version: 4.5.3

25 Bootstrap Datepickers and Timepickers (6)

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

25 Bootstrap Datepickers and Timepickers (7)

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

25 Bootstrap Datepickers and Timepickers (8)

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

25 Bootstrap Datepickers and Timepickers (9)

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

25 Bootstrap Datepickers and Timepickers (10)

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

(Video) Datepicker Using Jquery Bootstrap

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

Bootstrap version: 4.3.1

25 Bootstrap Datepickers and Timepickers (11)

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

(Video) Ngb-Timepicker + Ngb-Datepicker and Timezones

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

25 Bootstrap Datepickers and Timepickers (12)

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

25 Bootstrap Datepickers and Timepickers (13)

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

25 Bootstrap Datepickers and Timepickers (14)

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
(Video) How to disable previous dates in bootstrap datepicker

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

25 Bootstrap Datepickers and Timepickers (15)

Author

  • Jacques Archimède

Links

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

Links

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

25 Bootstrap Datepickers and Timepickers (16)

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)

(Video) Datepicker with Django (please use earphones if audio is unclear)

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

Responsive: yes

Bootstrap version: 4.3.1

FAQs

How to use date time picker with bootstrap? ›

You can follow the below code to display date and time without using the date and time icon.
  1. <html>
  2. <head>
  3. <title>Bootstrap date and time</title>
  4. <script>
  5. $(function() {
  6. $('#datetimepicker1').datetimepicker();
  7. });
  8. </script>

Does bootstrap 5 have a DateTimePicker? ›

Bootstrap 5 DateTimepicker. DateTimepicker is a form that adds the function of selecting date and time without the necessity of using custom JavaScript code.

Is there a bootstrap Datepicker? ›

Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code. This documentation may contain syntax introduced in the MDB 4.17. 0 and can be incompatible with previous versions.

What is the time picker in Datepicker? ›

A `TimePicker` is a text field that lets you select a time from a dropdown list. The `DateTimePicker` is a text field that allows you to select both the date and time from a calendar and dropdown respectively. Having these three different pickers gives you greater flexibility to handle more use cases in your apps.

How to select date and time in datepicker? ›

The date picker only lets you select a date, not a time, so formatting hours, minutes, and seconds wouldn't be supported. You can just append 00:00:00 yourself. var curTime = new Date() . You can use libraries like moment to format however you want.

How to get date and time in datepicker? ›

On an Access form, use the Date Picker to enter the current date. If the field is set up as a Date/Time field, the Date Picker icon appears when you click in the field. Click the icon, and then click the Today button below the calendar.

How to add time picker in Bootstrap? ›

You can open Time Picker by clicking on another element. If you want to do this, you have to add . time-picker-opener class and data-open="TimePickerID" HTML data-* Attribute on opening element. This is a mobile version of the documentation.

Does Bootstrap 4 have a Datetimepicker? ›

Bootstrap 4 compatible Datetimepicker with Material Design UI. Datetimepicker component allows user to select a date from a calendar and time from a visual analog clock; it also accepts values via direct input.

Is Bootstrap 5 stable now? ›

Bootstrap Versions

Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013); with new components, faster stylesheet and more responsiveness. Bootstrap 5 supports the latest, stable releases of all major browsers and platforms.

Is Bootstrap still in demand? ›

Bootstrap experience is in high demand, not just for front-end developers, but also for full-stack developers.

Is Bootstrap needed anymore? ›

In summary, Bootstrap isn't dead. Millions of developers use it. 40,000+ companies use it. It had a major facelift in 2020.

How to create a DatePicker in Bootstrap? ›

You can add a bootstrap date picker using the datetimepicker() and the id given to the input element. You can change the language of the bootstrap date picker using the locale option. You can create a time-only bootstrap date picker by using format:'LU'.

How to add timepicker in Datepicker? ›

In order to add this time picker you have to follow the below steps.
  1. Include CSS and JS files of the jQuery UI Datepicker.
  2. Include CSS and JS files of the time picker addon.
  3. Call the datetimepicker() method on the selector.
Apr 11, 2023

What's the purpose of date time pickers? ›

In the world of web development, a date/time picker is a type of user interface component, which makes it easier to help visitors to quickly select dates, times and/or date ranges on the booking, schedule, event calendar web apps.

How do you insert a date time picker? ›

In the Data type box, click Date and Time (dateTime). Click Format. In the Date and Time Format dialog box, in the Display the time like this list, click the option that you want, and then click OK. In the Date Picker Properties dialog box, under Default Value, click Insert Formula .

How to select a date in Bootstrap Datepicker? ›

We need to add one argument format and our required format to set the date format. When we click on the button named "get data using date", in this case, datepicker sets the value of date, and we get that new date value using jQuery.

What is the format of Datepicker with time? ›

Display format in JQuery DateTimePicker widget
FormatDisplay in DateTimePicker
Full Date and short time - dddd, MMMM dd, yyyy HH:mm ttFriday, September 12,2014 2:04 PM
Full Date and Long Time - dddd, MMMM dd, yyyy HH:mm:ss ttFriday, September 12,2014 2:04:00 PM
UTC - yyyy-MM-dThh:mm:ssz2014-09-12T2:04:00+5
2 more rows

What is the format of Bootstrap Datepicker? ›

By default, <b-form-datepicker> returns dates as a string in the YYYY-MM-DD format, which is the same format returned by native browser <input type="date"> controls. You can have <b-form-datepicker> return a Date object (with no time portion) as the v-model value instead by setting the value-as-date prop.

What is the default time picker in bootstrap? ›

MDB Timepicker allows you to use a inline version timepicker. Default version is with 12h.

What is the latest version of Datetimepicker? ›

7.0. 0 (2023-03-18)

What changed in Bootstrap 3 vs 4? ›

While Bootstrap 3 provided Skip navigation, Nested headings, and color contrast, Bootstrap 4 has improved the accessibility with its components. Styling and layout from version 4 can be applied to a wide range of markup structures.

Is Bootstrap 4 still maintained? ›

Bootstrap 4 will officially end of life January 1, 2023, though you're obviously welcome to continue using it longer than that.

What will replace Bootstrap? ›

Bootstrap Alternatives:
  • Tailwind CSS. Tailwind CSS is a popular low-level CSS framework built around the concept of utility classes. ...
  • Bulma. ...
  • Materialize. ...
  • Foundation by Zurb. ...
  • Pure CSS. ...
  • Element. ...
  • Skeleton. ...
  • Metro UI.

Why is Bootstrap 5 better than 4? ›

Bootstrap 5 now provides easier customizations on the v4 theming pages and provides code snippets to build using Bootstrap's Sass files. Bootstrap 5 has added a new accordion component that includes icons that have a state and can be clicked.

Why Bootstrap 4 is better than Bootstrap 5? ›

Bootstrap 4 is compatible with both Internet Explorer 10 and 11. Bootstrap 5 does not support Internet Explorer 10 and 11. Radio buttons and checkboxes appear differently in different operating systems and browsers. The form takes advantage of whatever basic browser features are available.

Why people don t use Bootstrap? ›

It means the layout will break at different points for different users, depending on their settings. Plus, the Bootstrap grid adds a lot of overhead and unnecessary markup to the page. With IE slowly losing support, CSS grid is a much more lightweight option.

Why don't people like Bootstrap? ›

While Bootstrap is easy to use, it's not so easy to customize as you might think. Some components will require you to use ! important several times, which is not ideal when creating CSS. And having to override the default styles of Bootstrap is just like having to create your own CSS from start.

Is it professional to use Bootstrap? ›

Bootstrap is widely used by professional web developers creating apps and sites for companies in many sectors. According to Similartech, more than half a million websites in the US were built using Bootstrap .

Is Bootstrap relevant in 2023? ›

Bootstrap is a popular front-end development framework that is used to create responsive, mobile-first websites. As of 2023, Bootstrap is still widely used and is a valuable skill to have as a web developer.

Is it illegal to use Bootstrap? ›

It permits you to:

Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes.

Why does everyone use Bootstrap? ›

Bootstrap is a convenient and flexible framework to use. It speeds up the development process without reducing the level of quality that developers want in their web projects. While Bootstrap is a framework for front-end developers, back-end developers can also build front-end projects with it.

What is the size of Bootstrap DatePicker? ›

By default DatePicker has standard height and width (height: '30px' and width: '143px'). You can change this height and width by using height and width property respectively. $(function () { // creates DatePicker from input $("#datePicker").

How to set date in Datepicker dynamically? ›

Script –
  1. Call datepicker() method on the input element.
  2. Specified 3 options – dateFormat – Set date format. maxDate – Set max selection date. In the example, I set it to +1m +10d means 1 month and 10 days from today. minDate – Set minimum selection date. In the example, I set it to -10 means subtract 10 days from today.
Nov 24, 2022

How to set current date time in bootstrap Datetimepicker? ›

JS
  1. var date = new Date();
  2. var today = new Date(date. getFullYear(), date. getMonth(), date. getDate());
  3. var optSimple = {
  4. format: 'mm-dd-yyyy',
  5. todayHighlight: true,
  6. orientation: 'bottom right',
  7. autoclose: true,

What is the difference between date picker and date range picker? ›

The date range picker functions much like the single date picker but instead of choosing just one date the user can choose a start and end date. For each date in the range, users have the option to manually enter the date in a text field or select the date in the calendar.

What is the time picker concept? ›

Android Time Picker allows you to select the time of day in either 24 hour or AM/PM mode. The time consists of hours, minutes and clock format. Android provides this functionality through TimePicker class.

How to use date time picker in JavaScript? ›

JavaScript DateTime Picker Code Example

let dateTimeInstance: DateTimePicker = new DateTimePicker(); dateTimeInstance. appendTo('#datetimepicker');

How to set current date in datepicker bootstrap? ›

JS
  1. var date = new Date();
  2. var today = new Date(date. getFullYear(), date. getMonth(), date. getDate());
  3. var optSimple = {
  4. format: 'mm-dd-yyyy',
  5. todayHighlight: true,
  6. orientation: 'bottom right',
  7. autoclose: true,

How do you use a date time picker? ›

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

How to set date in datepicker dynamically? ›

Script –
  1. Call datepicker() method on the input element.
  2. Specified 3 options – dateFormat – Set date format. maxDate – Set max selection date. In the example, I set it to +1m +10d means 1 month and 10 days from today. minDate – Set minimum selection date. In the example, I set it to -10 means subtract 10 days from today.
Nov 24, 2022

How to set date format in DateTimePicker? ›

In the following example, set dateTimeFormat to full datetime format. Add the following code in your HTML page.
...
Display format in JQuery DateTimePicker widget.
FormatDisplay in DateTimePicker
Full Date and Long Time - dddd, MMMM dd, yyyy HH:mm:ss ttFriday, September 12,2014 2:04:00 PM
UTC - yyyy-MM-dThh:mm:ssz2014-09-12T2:04:00+5
3 more rows

What is the default date format for bootstrap DateTimePicker? ›

Quick reference
OptionDefault value
enableOnReadonlytrue
endDateInfinity
forceParsetrue
format'mm/dd/yyyy'
35 more rows

What is the default date in DateTimePicker? ›

By default, the DateTimePicker value is null and the date-time selector popup is hidden.

Videos

1. How to Add a Date Picker to a Bootstrap Form
(Formden.com)
2. Date Time Picker and Phone Mask for Form Field - Django JQuery
(StudyGyaan)
3. Bootstrap Datepicker
(CSS-Tricks)
4. How to install and use flatpickr datetime picker
(devn8)
5. Date & Time picker using html CSS #tivotal #shorts #css #trending #coding #webdev #webdevelopment
(Tivotal )
6. HTML : Customizable jQuery datetimepicker plugin
(Knowledge Base)

References

Top Articles
Latest Posts
Article information

Author: Francesca Jacobs Ret

Last Updated: 06/27/2023

Views: 5628

Rating: 4.8 / 5 (48 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Francesca Jacobs Ret

Birthday: 1996-12-09

Address: Apt. 141 1406 Mitch Summit, New Teganshire, UT 82655-0699

Phone: +2296092334654

Job: Technology Architect

Hobby: Snowboarding, Scouting, Foreign language learning, Dowsing, Baton twirling, Sculpting, Cabaret

Introduction: My name is Francesca Jacobs Ret, I am a innocent, super, beautiful, charming, lucky, gentle, clever person who loves writing and wants to share my knowledge and understanding with you.