Building a Date & Time control should be easy, right? Just a couple of hours of work and you can whip it up with some JS and CSS magic. Easy peasy!

Well... we've been doing this for some years now and let me tell you this: it's not that simple. Let's see what you'll be needing for a great date and time picker.

These are the obvious and not so obvious features. You might just need a couple of these or maybe most of them to solve your immediate needs, but probably not all. Fair enough... keep in mind the Date & Time can prove to be useful in a whole lot of contexts.

• Date selection
• Time selection
• Datetime selection
• Circular scrolling wheels - this was not an easy task at all.
• Infinite scrolling
• Load values on-demand to improve scrolling performance
• Styling and themes:
• iOS styling with 3D rotating wheels - optimizing performance cross platform was a killer task.
• Material styling
• Windows phone styling
• Auto-theme feature for loading the appropriate theme based on the device
• Custom themes for OS specific look & feel branded with the your colors
• Minimum and maximum values for restricting selections
• Disabling selection with invalids
• Localized date and time format
• Supporting short and long day names and month names in date formats through a generic localization API
• Localized UI microcopy - button copy is loaded from language settings
• Button API - supporting presets for Clear, Set, Cancel and Now with the option of custom actions and text
• Lifecycle events for custom functionality and actions:
  • onBeforeClose
  • onBeforeShow
  • onCancel
  • onChange
  • onClear
  • onClose
  • onDestroy
  • onInit
  • onItemTap
  • onMarkupReady
  • onPosition
  • onSet
  • onShow
• Destoy method for memory cleanup
• Utility funtions for further customization:
  • cancel()
  • clear()
  • disable() and enable()
  • getArray() & setArrayVal()
  • getInst()
  • getVal() & setVal()
  • hide() & show()
  • isVisible()
  • option()
  • position()
  • select()
  • tap()
• Multi-layered default values with regard to the model, input and the component
• RTL language support
• 12 and 24 hour time format
• Custom header with dynamic values
• Parse and format functions for working with custom value formats
• Scroller wheel order
• Liquid wheel rendering with control on wheel widths
• Display modes supported for a perfect fit depending on the context:
  • Bottom
  • Top
  • Center
  • Bubble
  • Inline
• Setting the number of values visible and wheel height
• Plain Javascript API for usage with vanilla JS
• jQuery friendly API for usage when jQuery is loaded and with jQuery Mobile
• Angular JS API for usage with Angular 1.x and Ionic 1
• Angular API for usage with Angular 2+ and Ionic 2+
• Typescript definitions
• React API for usage with React JS - usage in JSX

These are the things that you don't think about. All those little details, edge cases that you don't come across when you assess the project and things that usually surface when people start using it. These are the invisible helpers that make things work like they do.

• Datetime compact view - select the date on a single wheel
• Datetime expanded view - select the date-parts on separate wheels
• Show/hide animations with platform awareness - animation performance is tested on multiple devices and platforms and disbaled on certain versions for improved overall performace
• Scrolling performance inprovements continuously tailored to old devices and new devices alike
• Auto-theming supports custom themes - load the customized and branded themes instead of system themes
• Being able to set invalid dates:
  • single date
  • range of dates
  • recurring dates
  • recurring days, week days and days in month
  • valid override inside invalid sets
• Regular UX audits based on usage and feedback from users
• Regular performance audits based on usage and feedback from users
• Smart defaults so that you don't have to specify every option when using it - this is a an ongoing process. Monitoring usage and continuously applying improvements and refinements. Developers using Mobiscroll are extremely happy about this.
• Working with and across multiple time zones
• Doing daylight saving time right... - let's just say it is not as simple as it seems. Did you know that in some timezones DST is switching at 00:00 and not 03:00?
• Accessibility - a lot of developers forget this exists
  • Keyboard navigation support: Tab navigation, selection with arrow keys, Enter, Esc key bindings
  • Focus management: keeping focus inside the modal popup
  • Testing with screen readers on mobile and desktop
• Preventing virtual keyboard popup on various platforms
• Handling platform specific browser issues:
  • Rendering engine bugs
  • Solving the iOS Safari "dead area" on the bottom of the screen, when browser toolbar is hidden

Some things that come after the "Yay... It's done!"

• Making sure that everything runs as expected with every major OS upgrade. - iOS 12 in beta? Browsers are pretty solid nowadays you might think, but they decided to do a small change is Safari how redraws are being done and now everything breaks.
• Making sure that the fixes run on older OS versions as well.
• Making sure that the look and feel keeps up with the platforms and doesn't look outdated.
• Testing on Android. - and that is when you realize, wow that is a segmented market.
• It's my code to maintain now, there is noone I can reach out to help me with it. - this is a huge deal, Read the Mythical Man Month.
• Do I really want to do this or work on something that makes sense for my company?

Please do yourself, your customers, clients and managers a favor. Don't waste your time and make meaningful progress.

Check out licensing options