Mobiscroll 2.0 RC1

Hi Everyone! This will be the first post on the mobiscroll blog, and we’re gonna start with the anticipated 2.0 release.

We were really busy working on the new version of mobiscroll which will be the most packed release yet!

After seeing how mobiscroll is being used, we’ve been thinking about how we can make it better, more useful and easier to set up.
Processing the feedback we got from the development community we realized we should break up mobiscroll a little bit to be more lightweight and more modular.
So we decided to to take the following approach…


The scroller core is a standalone downloadable in 2.0.
It’s much more smaller and more compact. And the best thing it’s decoupled from the presets and configuration.


The core can manage one or more presets.
This plugin system enables us and community to expand on the mobiscroll core and build awesome presets ranging from different scroller pickers to dropdowns, image scrollers…. Whatever you can imagine.


The third building block is the skinning and theming functionality.
You can manage one or more themes which can have CSS and javascript descriptions. The same thig here too. There are infinite possibilities for customizing your mobiscroll.
This is a major change for mobiscroll. It opens new possibilities. It’s not just about a date and time picker for touch devices, but a fully customizable scroller.

The changelog for the 2.0 RC1

Structural changes

Mobiscroll has now a modular structure. The core contains the wheel generation and scrolling logic. The core can be extended by presets. Presets are basically a collection of predefined settings, which are passed to the core, but may contain other initialization logic, which is executed when the scroller instance is created.

Currently you can include the ‘date’, ‘time’, ‘datetime’ and ‘select’ presets.

Themes are now also modular, css styles are in separate files for each theme. Themes may have an optional javascript file, where default settings can be set, and an optional init function as well.


  • Removed: beforeShow event is now removed
  • Removed: showValue option is now removed, use the headerText option instead
  • Removed: btnClass option is now removed, button style can be changed by adding css rules to the .dwb class


  • Fixed: Android ICS Light skin fix (small +/- appeared above/under arrows)
  • Fixed: onSelect and onCancel events are now called after the popup is closed and all the form elements on the page are re-enabled, making possible to submit the form in these events.
  • Fixed: In custom events this refers to the original HTML DOM element instead of the settings object


  • Changed: The visibility of year, month and day wheels is now controlled by dateOrder option, e.g. use ‘mmyy’ to display month and year wheels only
  • Added: display option, which can be ‘inline’ or ‘modal’ (default)
  • Added: headerText option to specify a custom string which appears in the popup header. If the string contains ‘{value}’ substring, it is replaced with the formatted value of the scroller. If headerText is set to false, the header is hidden.
  • Added: onShow event
  • Added: delay option to specify the speed in milliseconds to change values in clickpick mode with tap & hold, default is 300 ( Issue 68 )
  • Added: jQuery Mobile theme, set theme option to ‘jqm’
  • Added: ‘select’ preset to enhance a regular HTML select. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset
  • Added: minDate and maxDate options to specify a range which can be selected. Works for datetime as well.


We encourage everybody to play with it, and let us know if you find any bugs or if there are any issues!
You can grab the latest release from
Documentation is at
Stay tuned for more info and make sure you subscribe to the blog.
Happy scrolling!

Start building better products
Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!