Find the best Date and Time Picker to work nice with any screen size

by BuddyForms | BuddyForms Form Builder

For the BuddyForms Plugin we are in need of a Date and Time Picker Form Element. That’s why we are searching for a nice looking and easy to use Date and Time Picker.

BuddyForms is used on normal screens like desktops and laptops and also need to work nice on mobile. It’s important for us that the Date and Time selector is easy to use on all screen sizes.

After doing a short research we realised that it’s not an easy choice. There a many different Data and Time picker out there and I want to be careful selecting the right one. That’s why I decided to write this article, describe the once I have found and ask you for your opinion.

Which is the right Date and Time Picker. Which one should we use in the BuddyForms Plugin?

1. jQuery Time Picker Add-on

This jQuery Add-on is used by many plugins and a powerful solution. We use it right now in the BuddyForms plugin. But it lacks in responsive/mobile and we need something which works great for all screens. That’s why we search for something new.

Anyway it’s still a great Add-on.

GitHub | Documentation

 

 

2. Bootstrap 3 Datepicker v4

687474703a2f2f692e696d6775722e636f6d2f6e666e766835672e706e67

Bootstrap 3 Date Picker v4 looks really promising. It is build for mobile but looks nice on all devices and screen sizes. It’s build on GitHub and has over 60 contributors. The development looks quite fast and the Add-on is already available in version 4. The documentation is extensive and comes with a great demo to see the Data and Time Picker in action.

The usability is nice and easy but the time selector is hidden behind an icon and it can be confusing. It also need quite a lot of resources and I think it only make sense for Bootstrap themes.

GitHub | Documentation and Demo

 

 

3. jQueryMobile – DateBox

DateBox is a jQueryMobile plugin that works perfect on mobile. It comes with an extensive documentation and has a great demo to show the possibilities. It has many options to configurate the look and feel. There are 31 contributors so far, 11 issues and 3 new pull requests. It has a clean css and all js can be loaded separately.

GitHub | Documentation and Demo

 

 

4.Pickadate.js

Pickadate is a really mobile-friendly, responsive and lightweight jQuery date & time input picker. But this is the point. It is 100% designed to be used for mobile and I do not think that the time select field will be nice on lager screens. It is a scrollable timeline to pick your time. It can be displayed in many different formats. If I would only search for a mobil solution, pickadate.js would be definitely my choice.

It has over 5000 stars on Github and is in a rapid development. There a are 77 issues and 7 pull request right now and the css and js is clean and lightweight.

GitHub | Documentation and Demo

 

 

5. xdan/datetimepicker

xdan/datetimepicker is the last Date and Time Picker I have tested. It is also build with jQuery and can be used on mobil. But it does not look so nice as the others. It looks more like the default jQuery calendar with a timeline on the site which can be scrolled also on touch devices.

GitHub | Documentation and Demo

 

 

Conclusion

We want BuddyForms to work with all themes and load as less css and js to have it run nicely. I like the Bootstrap 3 Datepicker v4 a lot, but I’m afraid, it will be a big overhead. A BuddyForms Form should not load the complete Bootstrap CSS just to display a Data and Time Picker.

We need something lightweight and functional.We need to make sure it will not brake someones design and just work. Right now jQueryMobile – DateBox looks promising to me. I’m looking forward to get some feedback from you.

Did you use one? Or did I miss one you like? Which is the best in your opinion? Let us know.

Contents show

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

More from the Magazine

BuddyForms BuddyPress Members Benefits

Today we want to introduce you a special recommendation: BuddyForms BuddyPress Members, one of the best accessories you can find to make a social network in favor of your brand. BuddyPress Members benefits are superior to other similar plugins. It’s important to have...
Read More

Benefits of customizing your template with hook fields

Having an original website is possible even when working with templates, and it’s necessary to be able to focus on a target audience. So today we want to talk to you about the benefits of customizing your template with hook fields. Now why do we say it’s necessary in...
Read More

Top 5 most used BuddyForms extensions

Today we want to present to you the most used top 5 BuddyForms extensions by users looking to apply better development to their websites. Among these extensions there are some specials for content management and production, also for e-commerce, to improve the user...
Read More

What can you get with BuddyForms?

With the BuddyForms Plugin installed in WordPress you can configure 100% customizable contact, registration and publication forms for your website. If you have a project, where users need to create content on their page, it’s important to have a plugin for all the...
Read More

Why create a community for your business?

While it is true that in order to compete in the market you need to have a product or service as a solution for your potential customers, it is also true that without a community your business has no future. So start by asking yourself why create a community. First of...
Read More

Are you already using Content Marketing to grow your brand?

Currently there are many platforms on the Internet that can help your brand/business to generate content marketing to lead you to a positive income, there are even many virtual stores. To stand out on these Internet platforms we must attract the public and we can only...
Read More

The 5 keys to creating high-value content

Creating high-value content depends fundamentally on knowledge related to various aspects, such as your niche, your brand, interests, among others. In this article we are going to share the 5 keys to create valuable content with which you can attract potential...
Read More

MailPoet and BuddyForms

Creating a newsletter is an essential part of every online driven business and website. Nearly every website uses a newsletter to stay in contact with their audience, this is where MailPoet and BuddyForms comes in. Contact and registrations forms have a checkbox for...
Read More

How to speed up development

Development can be a stressful process. You have all these requirements you want and need to fulfill but also a fast-approaching deadline. It is also a process characterized by a lot of trial and error which on its own can take up a significant chunk of time. In every...
Read More

Pods in Change

We just recently released a new extension BuddyForms Pods and We've been quite excited about it. We did not know much about it until a customer asked us to support him and from the moment we understood it, we immediately became a fan of the Plugin. We have been...
Read More
Share This