A VanillaJS Date / Time picker

Introduction

In this article I will show the VanillaJS Date / Time picker I've developed. It is meant as an easy, user friendly component for entering a date and / or time.

General setup

The solution I will be showing consists of three JavaScript modules, these together make up the Date / Time selector. The solution is compatible with IE9 and newer as long as you use a polyfill for classList on IE9. The following modules are used:

  1. Intermediary.js: Intermediary is a singleton class which can be used for communication between modules without them having to know about each other. It can be used to loosely couple modules.
  2. CircularSelector.js: The class is used to show options in a list where there is only a single option visible and the user can either move horizontally or vertically through the options. This way it can represent hundreds of options while using only 3 DOM elements to cycle through all of them.
  3. DateTimeSelector.js: This is the module which ties everything together, it is responsible for making sure the date is properly shown on screen