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, 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, 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
Image source: https://github.com/uxsolutions/bootstrap-datepicker/blob/master/docs/index.rst
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
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
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
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
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
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
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
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
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
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
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
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
Top UX Trends in 2019-2020 for Mobile Apps
Top 19 Bootstrap Developer Friendly Templates for 2020
Originally published at flatlogic.com — React, Angular, Vue, Bootstrap & React Native templates and themes.
Text source: 13 Bootstrap Date Pickers Examples
Top comments (0)