13 Bootstrap Date Pickers Examples
Tags: frontend, webdev, bootstrap
Published: 2020-12-31 09:50:37

---
title: 13 Bootstrap Date Pickers Examples
published: true
description: Date pickers are widgets that allow users to pick single/range date, time. It’s a usual element for every Internet user since we see it almost everywhere
tags: frontend, webdev, bootstrap
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://flatlogic.com/blog/13-bootstrap-date-pickers-examples/
---
##**Intro**

Date pickers are widgets that allow users to pick single/range date, time. It’s a usual element for every Internet user since we see it almost everywhere (especially in registration forms when it needs to fill the date of your birth). 

When it comes to the development of your own app and the functionality of the app implies the opportunity to select the date, here the choice comes: to make the calendar from scratch or to find a ready solution. We recommend the second variant. It seems that finding an appropriate widget is an easy task to accomplish. But you must be vigilant, because poorly designed bad coded date picker can ruin your app, especially for apps where dates and time are used in core functions. 

There are different cases when users need to input date: to buy a ticket, arrange meetings with doctors/friends/colleges/bosses, chose the date of delivery, input the date of your birth (or relatives’ dates), schedule events, track time. The date picker you chose must be consistent with the purpose. 

To be honest, there are not many good date pickers libraries on the Internet. Even a smaller amount of them offers good customization. It’s also hard to find several examples with fancy designs. And a very few date pickers are both highly customizable and have nice-looking interface. But we found them!

In the article, we consider not only the list of bootstrap well-coded date pickers but different types of them and functions they offer. *Enjoy reading!*

##**What date pickers we consider?**

All libraries in the article are **calendar-based**. That means that to choose the date you can simply type the date in the [text field](https://colorlib.com/wp/wp-content/uploads/sites/2/bootstrap-datepicker-codepen.jpg), but it’s expected that you use the calendar to pick the date.  

Let’s define parameters for date picker libraries. 

First of all, there are **range and single** date pickers. Single date pickers allow users to pick only one day within one frame. On the other hand, range date pickers provide users with the opportunity to pick a range of dates within a single calendar. Libraries with two linked input fields (start date and end date) are not range date picker in its plain meaning, because in each field you define a single date, not a range. However, using a pair of two different days give us a **range of dates** from an earlier date to a later one.

You can extend a date picker with a **time input**. It serves for specific purposes and is mostly used for scheduling or arranging meetings. The opportunity to set a list of predefined values is especially helpful there. 

**Numerical input support.** Sometimes it’s easier to type the necessary date from the keyboard than tapping and scrolling through years and months. For that purpose, some date pickers keep date field active so users can type the value in it. You shouldn’t forget to set a format helper like DD/MM/YYYY. Moreover, the transition between year, day, month must be automatic without the necessity to type any additional symbol like a dot or slash. 


The next option is **indicators** on the calendar like dot near the date, highlighting with different colors, bold borders, a gray day number for inactive dates. Indicators play a significant role when you develop a complex calendar-based app, where users are supposed to use the calendar as a schedule or for arranging meetings/visits.  

**Design.** If you have a specific design in the app it’s reasonable to look for a simple and straightforward design that is not based on Material design principles. 

**Complex date patterns.** Every Friday, Monday, the previous week, month, etc.  
**Additional features.** Do you need a clear button, today button, additional languages for the calendar, documentation? Maybe you are looking for the most popular library on GitHub? We mention such things in that paragraph.

##**Why bootstrap?**

Bootstrap is **the most popular** HTML, CSS, JS library in the world. A **lot of web sites and apps** are based on it. That is the first reason why the article is devoted to Bootstrap date picker. 

The second reason is also quite simple: Bootstrap is a very good framework for developing **responsive UI** for mobiles thanks to the mobile-first Bootstrap grid system. According to [Statista](https://www.statista.com/statistics/617136/digital-population-worldwide/), there are 4.2 billion mobile Internet users, 61% of Google search visits take place on mobile devices. Bootstrap makes the user experience much more enjoyable and the process of development easier. 

Now let’s jump to the top.

##**The top 13 best bootstrap date pickers for your app**

###**Bootstrap datepicker from uxsolutions**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/uxsolutions-min-1024x495.png?lossy=1&strip=1&webp=1)<ficaption>Image source: https://github.com/uxsolutions/bootstrap-datepicker/blob/master/docs/index.rst</ficaption>

*Note: impressive customization and functionality are available* 
**Type:** Single, Range
**Time input:** No
**Numerical input support:** Yes
**Indicators:** Today, Selected day, Group of days
**Design:** Simple, clear and intuitive, convenient display of range with different colors
**Complex date patterns:** All possible variants that exist on the Internet

**Additional features:**

- comprehensive documentation,
- 12 k stars on GitHub,
- day limits,
- setting min/max view mode (decades/ centuries),
- today button,
- 30+ languages, multidate opportunity, days disable, and much more.  

**More info:** https://github.com/uxsolutions/bootstrap-datepicker/blob/master/docs/index.rst

###**Date Range Picker**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Date-Range-Pickerat-14.38-min-1024x338.png?lossy=1&strip=1&webp=1)<figcaption>Image souce: https://www.daterangepicker.com/</figcaption>

**Type:** Single, Range
**Time input:** Yes, in digital format
**Numerical input support:** Yes
**Indicators:** Today, Selected day, Range of days
**Design:** Cool and modern, range is highlighted with 2 colors
**Complex date patterns:** Yes, a lot of. Yesterday, today, last 30 days, last month 

**Additional features:**

- almost 10 k stars on GitHub,
- option to limit dates user may select,
- show week numbers, seconds picker, a lot of other features. Very convenient for reports since it was created for analyzing data from online.

**More info:** https://www.daterangepicker.com/

###**Bootstrap 4 blue themed date picker with date range and week number**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Bootstrap-4-blue-themed-date-picker-with-date-range-and-week-number-min-1024x503.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://bbbootstrap.com/snippets/blue-themed-date-picker-date-range-and-week-number-61366925</figcaption>

*Note: This is the most informative name of the library we have ever seen.*
**Type:** Single, Range (the UI consist of one field with highlighted range, but the component works with two fields that user must select separately)
**Time input:** No
**Numerical input support:** Yes
**Indicators:** Selected day, range of days
**Design:** Little overwhelmed with 4 different logical fields (week counter, calendar, month/year selector, clear button). The color scheme uses 6 different colors in one frame that is a lot.
**Complex date patterns:** No
**Additional features:** Week counter, this is a straightforward date picker without additional features.

**More info:** https://bbbootstrap.com/snippets/blue-themed-date-picker-date-range-and-week-number-61366925

###**Ab-datepicker from eureka2**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Ab-datepicker-from-eureka2-min-1024x573.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://github.com/eureka2/ab-datepicker</figcaption>

**Type:** Single, Range (with the help of two linked date pickers)
**Time input:** No
**Numerical input support:** Yes, with format helper
**Indicators:** Selected day
**Design:** 5 color patterns, clues for the names of days of the week, days of the month are separated with perpendicular black lines.
**Complex date patterns:** You can disable days of week

**Additional features:**

- well documented,
- 5 different design themes,
- more than 40 languages,
- start view from month or year,
- date limits.

**More info:** https://github.com/eureka2/ab-datepicker

###**Bootstrap date picker**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Bootstrap-date-picker-min-1024x409.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://mdbootstrap.com/docs/jquery/forms/date-picker/</figcaption>

**Type:** Single
**Time input:** No
**Numerical input support:** Yes, but without format helper like DD/MM/YYYY
**Indicators:** Today, Selected day
**Design:** Simple, Material 
**Complex date patterns:** No

**Additional advantages:**

- well-documented,
- 40 languages translations out of the box,
- you can add a hidden input element to display a selected day in an input field like “You selected (this is an additional element): 13 May, 2020”,
- you can limit available dates and disable some.

**More info:** https://mdbootstrap.com/docs/jquery/forms/date-picker/

###**Bootstrap 4 Dark themed date and time picker**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Bootstrap-4-Dark-themed-date-and-time-picker-min-1024x493.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://bbbootstrap.com/snippets/dark-themed-date-and-time-picker-76906698</figcaption>

**Type:** Single
**Time input:** Yes, and it’s a core functionality
**Numerical input support:** No
**Indicators:** Selected day, time
**Design:** Stylish black and blue design. The widget is divided into two main areas: one with an input field for date and another is a big white window with prescribed hours.
**Complex date patterns:** No
**Additional features:** No

**More info:** https://bbbootstrap.com/snippets/dark-themed-date-and-time-picker-76906698

###**Jtsade-datebox**

**Type:** Single 
**Time input:** Yes, in different variations
**Numerical input support:** No
**Indicators:** Today, Selected day, Selected time
**Design:** Little intricate design with buttons and unnecessary highlighted elements
**Complex date patterns:** A lot of different customization options are available in the documentation

**Additional features:**

- Extensive documentation,
- several types of the date picker are available, like standard calendar, scrolling date picker,
- date box with plus or minus one buttons, and much more. Highly customizable with a great number of options.    

**More info:** https://github.com/jtsage/jtsage-datebox

###**DatePicker from Flatlogic**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Datepicker-from-Flatlogic-min.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://github.com/T00rk/bootstrap-material-datetimepicker</figcaption>

**Type:** Single
**Time input:** No
**Numerical input support:** No, because there is no input field
**Indicators:** Selected day, special indicators for events, today
**Design:** Clear and simple with white background and colorful indicators
**Complex date patterns:** No

**Additional features:**

- Well-documented,
- no text input field,
- you chose the date on the calendar directly,
- you can select dates with colorful markers,
- good choice if you want to use a calendar as a scheduler.

**More info:** https://github.com/T00rk/bootstrap-material-datetimepicker

###**Bootstrap4 v5 date picker**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Bootstrap4-v5-date-picker5-at-14.42-min.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://tempusdominus.github.io/bootstrap-4/Usage/</figcaption>

**Type:** Single, Range (thanks to two linked pickers)
**Time input:** Yes, in a digital form
**Numerical input support:** Yes, but without format helper like DD/MM/YYYY
**Indicators:** Today, Selected days
**Design:** Simple, minimalistic, white, with seamless animation while switching between date and time pickers
**Complex date patterns:** Yes, option to disable days of the week. 

**Additional features:**

- well-documented,
- it’s available to pick a month,
- multidate pick and date disable options,
- destroy widget function,
- widely spread across the Internet.

**More info:** https://tempusdominus.github.io/bootstrap-4/Usage/

###**Bootstrap 3 Datepicker V4**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Bootstrap-3-Datepicker-V4-25-at-14.42-min.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://eonasdan.github.io/bootstrap-datetimepicker/</figcaption>

**Type:** Single, Range (two separate inputs to define range)
**Time input:** Yes, in a digital form
**Numerical input support:** Yes, no format helper like DD/MM/YYYY
**Indicators:** Today, Selected days
**Design:** White design with blue color for selected days, no visual grid between dates
**Complex date patterns:** Yes, option to disable days of the week. 

**Additional features:**

- well-documented,
- Bootstrap 3 support,
- you can pick a month or several days not in a row,
- widely spread across the Internet.  

**More info:** https://eonasdan.github.io/bootstrap-datetimepicker/

###**Date Time Picker from smalot**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Date-Time-Picker-from-smalot25-at-14.43-min.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://www.malot.fr/bootstrap-datetimepicker/demo.php</figcaption>

*Note: This library is considered obsolete*
**Type:** Single
**Time input:** Yes, and there are two steps selection of time: hours first, then tens of minutes. This is a good example of how time input may work 
**Numerical input support:** No
**Indicators:** Today
**Design:** Simple with different calendar positioning opportunities
**Complex date patterns:** No
**Additional features:** 3.5 k stars on GitHub, all features are connected with time pick.

**More info:** https://www.malot.fr/bootstrap-datetimepicker/demo.php

###**Check-in and out bootstrap datepicker**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Check-in-and-out-bootstrap-datepicker25-at-14.43-min-1024x349.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://codepen.io/amandalouise/pen/PNzeGx</figcaption>

**Type:** Range, based on two single pickers
**Time input:** No
**Numerical input support:** Only for days
**Indicators:** Selected day
**Design:** Minimalistic with a calendar icon in the input field 
**Complex date patterns:** No

**Additional features:**

- The only purpose of this calendar is a user-friendly calendar to select check-in and check-out date.
- The later date cannot be more than the first.  

**More info:** https://codepen.io/amandalouise/pen/PNzeGx

###**Bootstrap Date/Time picker**

![Learn JavaScript](https://833250.smushcdn.com/1694534/wp-content/uploads/2020/05/Bootstrap-Date_Time-picker-25-at-14.44-1024x384.png?lossy=1&strip=1&webp=1)<figcaption>Image source: https://codepen.io/johnfinkdesign/pen/NRyBZb</figcaption>

**Type:** Single
**Time input:** Yes
**Numerical input support:** Yes
**Indicators:** Today, Selected day
**Design:** Stylish and elegant with fancy fonts. Perpendicular lines in calendar and time picker fit strict applications.
**Complex date patterns:** No
**Additional features:** No

**More info:** https://codepen.io/johnfinkdesign/pen/NRyBZb

###**Bootstrap material date picker**

**Type:** Single, Range (so-called “events”: you chose two dates and two times – thus create a range of dates)
**Time input:** Yes, in the clock form where users can choose hours and minutes
**Numerical input support:** No
**Indicators:** Selected day, Selected time
**Design:** Material, green, the calendar is big enough because there is a nice block with a chosen date under the calendar
**Complex date patterns:** No 

**Additional features:**

- Well-documented,
- time picker in clock form looks awesome,
- event picker

**More info:** https://github.com/T00rk/bootstrap-material-datetimepicker

##**Conclusion**

We hope you became better in understanding date pickers and found one that you like. Just don’t forget to spend time and define cases how your users are going to pick dates/time – that helps a lot to find a necessary library for your app. 

*Thanks for reading.*
____________________
**You might also like these articles:**
[Top 7+ jQuery Free Admin Templates](https://dev.to/anaflatlogic/top-7-jquery-free-admin-templates-3fe)
[Top UX Trends in 2019-2020 for Mobile Apps](https://dev.to/anaflatlogic/top-ux-trends-in-2019-2020-for-mobile-apps-4403)
[Top 19 Bootstrap Developer Friendly Templates for 2020](https://dev.to/anaflatlogic/top-19-bootstrap-developer-friendly-templates-for-2020-2e57)
___________________
Originally published at [flatlogic.com](https://flatlogic.com/templates) — React, Angular, Vue, Bootstrap & React Native templates and themes.

Text source: [13 Bootstrap Date Pickers Examples] (https://flatlogic.com/blog/13-bootstrap-date-pickers-examples/)