DrumJS – A jQuery animated date picker and value selector (iOS style)

DrumJS is a jQuery animated date picker and values selector, styled as similar to iOS 7 UI.

jQuery animated date picker – DrumJS

This jQuery plugin allows us to replace a simple native HTML select with 3D cylinder as an alternate selector.

It allows to select a value by rotating the cylinder vertically with the mouse, or with touch gestures on mobile. The effect is similar to the iOS datepicker.

This plugin is based on HammerJS, a JavaScript library which provides a canonical treatment of touch gestures for different operating systems and a simulation for desktop browser with the mouse.

An example: jQuery animated date picker and value selector
An example: jQuery animated date picker and value selector

DrumJS appends a new DOM element to the HTML select element, which provides all the stuff for the 3D projection of a vertical roller, called the drum. The drum consists of a fixed amount of panels where each represends the content of one option from the HTML select element.

The highlighted item is the currently selected option of the HTML select element.

Basic use

<link rel="stylesheet" href="drum.min.css"></link>
<script src="drum.min.js"></script>

The enhancement to a drumjs widget is done by calling calling the plugin on a HTML select element:

<select>
  <option>1</option>
  <option>2</option>
  ...
  <option selected>39</option>
  ...
  <option>5</option>

And this line of JS code:

$("select").drum();

Doing so, the select element is hidden and the values are shown as a cylindrical 3D projection.

Without the HammerJS library, the plugin only works by clicking on the upper and lower area of ​​the widget. This functionality allows the use even if no touch gestures are supported.

Touch support with HammerJS

Touch gestures are active if the HammerJS lib is loaded.

<script src="hammer.min.js"></script>

Demos:

Datetime Range Picker

Clock demo

Get jQuery animated date picker from GitHub:

https://github.com/3epnm/drumjs

See also:

Date range picker for Bootstrap

jQuery countdown timer plugins

Hammer.js library + tutorials

Enjoy!

Share:Share on Facebook3Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest2