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

by BuddyForms | May 11, 2015 | BuddyForms

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

trentrichardson

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.

GitHubDocumentation

 


 

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.

GitHubDocumentation and Demo

 


 

3. jQueryMobile – DateBox

jQMDateBox

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.

GitHubDocumentation and Demo

 


 

4.Pickadate.js

pickadate

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.

GitHubDocumentation and Demo

 


 

5. xdan/datetimepicker

xdsoft

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.

GitHubDocumentation 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.

0 Comments

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from the Magazine

Choosing The Best Web Design Tools: Top 8 Tools For Freelancers

There are a lot of people that find freelance web design to be a desired career, whether it’s because it requires a lot of self-management, or because it requires long hours. Of course, it’s also possible that this is the most satisfying profession there...

Setup a Loyalty Reward System for Your Ecommerce Store in Six Simple and Easy Steps

As an eCommerce store owner or manager, I’m pretty sure by now you are aware of the competition you are facing. In addition, to tackle your competition, you need to come up with innovative strategies every now and then. One such strategy that has helped many...

Essential Tech Skills You Need to Get Hired as a Web Developer.

According to Statista, these are the most popular web frameworks among developers worldwide in 2021. React.js (40.14 percent of use by web developers), jQuery (34.43 percent), Express (23.82 percent), Angular (22.96 percent), Vue.js (18.97), ASP.NET Core (18.1...

The 9 best Golang Web Frameworks for Web Development

When it comes to web development, GoLang’s popularity as the preferred development language has only grown since its inception in 2009. With hundreds of frameworks available, it can be difficult to find the right one that fits your needs and processes the way you work...

How to Customize Your WooCommerce Product Page in 2022

If you’re in the e-commerce business and using WooCommerce to build your store, a good product page is essential in getting your customers to talk about your brand. Furthermore, customizing your product page will have your revenue soaring! Why Exactly is a...

8 Reasons Why WordPress Platform Remains Important for Digital Marketing in 2022

The open-source content management system WordPress currently powers 43% of all websites on the internet. That makes WordPress platform by far the most popular CMS globally, so it’s pretty clearly doing something right. If you’re looking for ways to make your digital...

3 Easiest Ways to Make Your WooCommerce Site Mobile-Friendly

3 Easiest Ways to Make Your WooCommerce Site Mobile-Friendly     If you own a WooCommerce site in 2022 and that site is not mobile-friendly, it is bad news. This is a blatant truth.   The competition in the industry is too high in today’s date and when...

3 Tips for Working With Digital Photos

So you’ve taken a bunch of great digital photos during a vacation, event, or outing, but they don’t look as good on the screen as they looked in your head. How do Instagrammers make their photos look great? Are they just stellar photographers? Not...

E-commerce Website Design: Top 10 Ecommerce Design Trends You Need To Know In 2022

Shopping has changed immensely because of the pandemic. People opt to shop online, and when your website is not ready for your customers, your business will fail.  Web design is your first line of offense; that’s why e-commerce stores these days need to focus on...

Top Pros And Cons of Native Vs Hybrid App Development in 2022

Native apps are apps intended to run on a specific OS, while Hybrid apps show elements of both a native app and a web app. The fundamental difference between these two apps is that the primary kind can be created across all stages, though the production of the native...

Benefits of Virtual Reality in WordPress Design and Development

Since the introduction of groundbreaking technologies such as Virtual Reality and AR, the world of web design has undergone a dramatic change. Major automotive brands, gaming brands, healthcare and education programmes have been the early adopters of these...

Why Digital Marketing Will Be An Important Asset For Any Startup Company In 2022

With new start-ups and brands launching each day, start-ups and new brands consequently have to compete with companies and their marketing campaigns that have been running for years. For start-ups to taste success, for instance, they have to market efficiently and...

10 Tips to Optimize Your WooCommerce Website

When we talk about e-commerce platforms, WooCommerce is considered a preferred choice for techies. It is very simple and easy to set up a WooCommerce site. You just need to simply purchase a domain, add the WooCommerce extension then utilize some tips to optimize your...

10 of the Most Important E-Commerce Trends You Need to Know in 2022: A Helpful Guide

The year 2021 brought many developments and challenges for retailers. The industry experienced advancements in technology, while simultaneously being hit with shipping and supply chain issues. The COVID-19 lockdowns forced retailers to become more innovative to reach...

15 Best Donation Plugins For Accepting Charity & Funds

Are you looking for suitable WordPress or WooCommerce-enabled donation plugins? Many plugins in the online marketplace enable you to accept online donations using your WordPress or WooCommerce-enabled site. Using donation plugins on your website is an effective and...

Top 5 Reasons to Choose Custom WordPress Development Over Theme

If you are considering having a website for your business, several questions might come to your mind. How do we develop it? Do we need to outsource website development services? How much does it cost? What platform to choose for the development? Though all of the...

Image SEO best practices for WordPress websites

Google search is one of the main traffic drivers for many websites. However, image search is gaining traction and is more relevant across different industries like photography, videography, e-commerce, entertainment, etc. In this article we’ll talk about Google image...

Is WordPress a good blogging platform?

WordPress has become one of the most important platforms for people all around the world. Being used by approximately one-third of the world’s population, it tops the most loved platforms for blogging with thousands of people adopting it as their first choice...

How is on-demand mobile app development changing the face of business?

Smartphones are the most potent and pervasive technological devices around us. Consumers connected businesses through their smartphones, where mobile apps allow them to get almost anything at the flick of a finger. Mobile apps, are also a way for businesses to connect...

The Ultimate Guide on Web Application Architecture

Learn the basics of web app architecture. In this post, you can find web application architecture types, components, and ways to create web app architecture.  Starting a new web project, you should pick the right architecture. It determines all the logic of app...

Digital Marketing: Use These Hacks to Boost Your Leads in 2021

Image (Source) Introduction  One thing the 2020 year has taught us is that it is never too late to grab new opportunities to sustain your business. COVID-19 pandemic has given an immense rise to online platform usage. It helps the businesses to continue their leads...

Deprecated Plugins on Themekraft

(Source) In a normal company’s lifespan, a lot of work is done, customers are acquired, and problems are surpassed. Also, many products are launched, and because of that many times, some of those products get left behind by time, technological advances, replaced...

Web Development Strategies for an Outstanding Site

Did you know that 59.5% of the entire world population uses the internet daily? Of this, about 92.6% use mobile devices to access the web. These people are using the internet to find products and services, connect with friends, work, and for entertainment. For any...

Lifetime Deals

Lifetime Deals or LTD is one of the most popular of many ways to sell your digital products in the SaaS industry. Subscriptions, standalone for free, and charge for some functionalities, Bundles, Addons, etc  While the subscriptions and the add ons have been around...

Our Products

Share This