Mobiscroll 2.0 RC2 is out

With Mobiscroll 2.0 RC1 just released last week we’ve been busy fixing bugs, and making mobiscroll even more awesome.
Here is a list of things that got fixed and changed since RC1.

(Note: When updating from earlier versions to 2.0 RC2, don’t forget to always set the preset to whatever you’re using! If you’re building custom wheels, you don’t need to set a preset. The defaulted ‘date’ was removed.
The seconds and ampm options were also removed. Use the timeWheels option instead.

The changelog for 2.0 RC2


  • Removed: ampm option is now removed, see the new timeWheels option instead
  • Removed: seconds option is now removed, see the new timeWheels option instead


  • Changed: preset option no longer defaults to ‘date’, it must be explicitly specified!
  • Changed: wheels option no defaults to empty array () instead of null
  • Changed: valid scroller items now have the class “dw-v” instead of “valid”
  • Changed: in 2.0rc1 days not in month were styled as disabled, like items out of the min/max range. From now on days not in month now have the class “dw-h” which, by default has a hidden style in css.


  • Fixed: Inline mode bug with jQuery Mobile, if it was not on the initial page (Issue 87)
  • Fixed: Select preset was not working in inline mode


  • Added: headerText can accept a function, which must return a string
  • Added: Day of week can be displayed on the scrollers. Use ‘D’ (short names) or ‘DD’ (long names) in the dateOrder options. SampledateOrder value: ‘mmD ddy’ will produce ’05’, ‘Thu 03’, ‘2012’ on the day, month and year wheels. (Issue 65)
  • Added: separator option used by the datetime preset to specify the separator between date and time parts. Default is ‘ ‘. (Issue 86)
  • Added: readonly option, if true, the scroller appears, but cannot be scrolled. Useful if you want to display a nice clock.
  • Added: timeWheels option to show, hide, and format the time related wheels on the scroller. Default is ‘hhiiA’. For the hour wheel use ‘h’, ‘hh’, ‘H’, ‘HH’, for minutes wheel ‘i’ or ‘ii’, for seconds wheel ‘s’ or ‘ss’, for am/pm wheel ‘A’ or ‘a’. E.g. for 24 hour time format with seconds and leading zeroes use ‘HHiiss’. (Issue 85)
  • Added: support for HTML5 date/datetime/datetime-local/month/time input types. If mobiscroll is attached to such an input, the format is forced to follow standard specifications. In the popup header the value is formatted according to the date and timeformat specified by the user. (Issue 70)

We’re very keen about getting to the final release, since really cool things are on the outlook.
Contao CMS will have mobiscroll as an extension, we’re planning to create a package generator where you can customize your download.

To see the release notes for 2.0 RC1 go here.
Download the latest version!

So stay tuned for updates and don’t forget to subscribe.


Thanks for all the support and feedback!

Your donations will help support the development and maintenance of mobiscroll!

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!
  • I am using RC1: 

    Am I able to dynamically get the values of the scroller using $(‘#myScroller’).scroller(‘getValue’); on an inline scroller element?
    It’s not working the way I have it right now. If I change the values of the inline scroller wheels and then call ‘getValue’, it always returns the initial value of the scroller instead of the updated values.

    This is my array that it keeps returning: [“1”, “PO”, “bid”, “30”, “11”] – the default values.

    I want to move all the click wheels and then hit a “save” button in my own personal modal window that I coded and on the click of the save button, I want to grab the updated values of the scroller. But the array never changes…

    $(document).on(‘click’, ‘.saveNumber’, function() {var numSelector = $(‘#test’).scroller(‘getValue’);console.log(numSelector);})

    My inline settings:
    $(“#test”).scroller({  preset: ”, width: 81, display: “inline”,  showLabel: ‘false’,  mode: ‘scroller’,  theme: ‘ios’, wheels: [{ ”: {1: ‘1 tab’, 2: ‘2 tab’}, ‘ ‘: {PO: ‘PO’}, ‘   ‘: {bid: ‘bid’, daily: ‘daily’, tid: ‘tid’}, ‘    ‘: {30: ’30’, 60: ’60’, 90: ’90’, 120: ‘120’, 180: ‘180’, 240: ‘240’}, ‘     ‘: {11: ‘1’, 22: ‘2’, 33: ‘3’, 44: ‘4’, 55: ‘5’} }] });

    Thoughts? let me know thanks!


  • I also doubled checked to see if it was just me or if your code lacked the functionality I am looking for. And it looks like you just haven’t coded this for inline wheels yet because it’s failing on your demo code as well.

    I went here:

    And then I choose to display the inline wheel

    Opened up my console, and typed this:

    And I got this:
    [4, 7, 2012]

    And no matter how many times I changed the wheel, the array never changes.

    Could I make a feature request for this?? Or is there a better way to do what I am doing?

    • Basically, I would like the power of the self-updating headerText option built into the getValue method so that calling “getValue” grabs the latest values of the selected wheels after they have been changed.

    • I tried the following on an inline scroller on the demo page and noticed a difference:

      “05/07/2012 03:07 PM”

      Calling the val() method on the scroller actually outputs the value of the wheels for the presets.

      But for custom scrollers, there is no output for .val(). It just appears as blank in the console.

      But just like the issue with getValue, this is not dynamic. I have to set the value and then call it again to get the updated value. I would love it if the value changed as soon as you changed the wheels…

  • Dean

    Is there a way to invert the direction of the wheel? For example: if normally when I scroll up on my mouse wheel the date increases then with an option to invert the scroll direction the date will decrease instead.

    • Dean

      On second thoughts the default direction of the scroller makes sense, and if I were to change the direction for my web app then anyone who has used mobiscroll before would become frustrated with the inverted scroll direction. In other words, ignore my previous comment and for the sake of consistency don’t add the option to change the scroll direction.

      • Dean

        Sorry for harping on about this and changing my mind every minute but…
        Does anyone else find that the scroll direction is the opposite to when scrolling in any window in any other application? If I want to scroll up in this browser window I push up with my finger on the scroll wheel, but in mobiscroll it’s the opposite; it matches the direction the scroll wheel rotates. Should the default scroll direction be changed? Any other thoughts on this matter?

        • Dean

          Never mind my previous 3 comments – actually if you wouldn’t mind just delete them.

          My problem only occurs in my web app, so I something must be conflicting with mobiscroll and causing the scrolling to be inverted. Hence why I found the scroll direction to be ‘opposite’ to scrolling in other windows.

  • Apparently my issue is a known bug and it will be getting fixed in the final 2.0 release.

    Here is a Google Group conversation that has a link to my JSFiddle with an “onChange” function for custom inline scroll wheels:

  • bld579

    On initialization, I no longer get -1 as the wheel index in the validate method.  Init now calls validate for each wheel.  Is there a way to know if the validate is during initialization vs from a user scroll event

    • Istvan Halmen

      In 2.0 final, the validate method will be called once (like in 1.6) and wheel index will be undefined on initialization.

  • john

    Does anyone else have the +/- only working as + regardless of which buttons are pressed it always increments no decrement.

    • Istvan Halmen

      It is 2.0rc2 bug, to fix it, you can change line 333. in mobiscroll.core.js from “plus(t);” to “func(t);”

    • kovlex

      Fixed with RC3!

  • Bld579

    Custom Preset Decoupling:

    I’ve built a custom preset that I call “measure”.  It takes a size range in Feet/Inches ( 4′ 5 3/8″ – 7′ 2 1/2″) and builds 3 custom wheels for Feet, Inch, and InchFraction.

    It works similar to the date preset (feburay 28 days instead of 31 days problem) in that as the user scrolls one wheel, the other wheels must be constrained.  In this example, when the user scrolls Feet to 4′, the inch and fraction wheels must be limited at the top of the LI’s to 5 and 3/8, respectively. On the max side,when the user scrolls Feet to 7′, the inches must be limited to 2 1/2″.  But if the user scrolls in between these range min/max, the inches and fractions must expand li values (inches from 0 – 11, and inchfraction, based on the increment set (1/8 or 1/16).
     I had originally built this in 1.6 and had to modify “core” significanly to make it work.  With the new approach, I’m able to isolate the custom code almost completely in the preset plugin. (great idea by the way).

    However, I did need to make one small change to core to get my approach to work.

    I did try to follow the datetime min / max logic without success.  I had difficulty, mainly because itI seemed the index values in the inst.temp array where unpredictable.  Especially, when I hide values at the top of the LI, the next temp values indexes are relative to the “visible” LI instead of the original list.

    My approach was to avoid enabling/disabling the LI using the dw-h/dw-v classes so that the inst.temp values are always consistent.

    The easiest approach was to use a class (“.off”) that sets the opacity = 0 for any LI  text that I don’t want the user to “see”, then I set a two  data values on each UL (data-min, data-max) in the validate method. 

    In validate()  I have the logic to use the inst.temp indexes to analyze the newly selected wheel value and set the opacity class and the min/max data values on the ULs.

    Here’s where I needed to modify core.  I baslically changed the “setGlobals” function to extract the min/max values from the UL, and set the “global” min / max there if the UL has valid min / max values set, else contimue setting the min/max based on the List size.

            function setGlobals(t) {            var swMin, swMax;            swMin =“min”);            swMax =“max”);            min = (swMin && swMin !== -1) ? swMin : $(‘li.dw-v’, t).eq(0).index();            max = (swMax && swMax !== -1) ? swMax : $(‘li.dw-v’, t).eq(-1).index();            h = s.height;            inst = that;        }

    This approach works beautifully.
    I can imagine that a common need for custom presets might be the ability to control the min / max scrolling values based on the results of the validation call.  May be a good idea to add in a “user hook” in setGlobals so that the user can define an optional function in the preset that gives the presetthe ability to set the min / max if needed?

  • sheepp

    Can I grab some help guys? I’ve customised a picker, but I’ve got this other null list style picker above it… I have no idea why, or how to disable it and I’ve been working on this for days. I’ve attached a picture of the problem, and heres the code I’m using:

                                    $(function () {             $(‘#radio’).scroller({    theme: ‘default’,    display: ‘inline’,    showLabel: false,    mode: ‘scroller’,    width: 10,    wheels: [ { ‘select’: { 80: ’80’, 81: ’81’, 82: ’82’, 83: ’83’, 84: ’84’, 85: ’85’, 86: ’86’, 87: ’87’, 88: ’88’, 89: ’89’, 90: ’90’, 91: ’91’, 92: ’92’, 93: ’93’, 94: ’94’, 95: ’95’, 96: ’96’, 97: ’97’, 98: ’98’, 99: ’99’, 100: ‘100’, 101: ‘101’, 102: ‘102’, 103: ‘103’, 104: ‘104’, 105: ‘105’, 106: ‘106’, 107: ‘107’, 108: ‘108’, 109: ‘109’ }, ‘dp’: { 1: ‘.’}, ‘your’: { 00: ’00’, 05: ’05’, 10: ’10’, 15: ’15’, 20: ’20’, 25: ’25’, 30: ’30’, 35: ’35’, 40: ’40’, 45: ’45’, 50: ’50’, 55: ’55’, 60: ’60’, 65: ’65’, 70: ’70’, 75: ’75’, 80: ’80’, 85: ’85’, 90: ’90’, 95: ’95’,  } ,  ‘station’: { AM: ‘AM’, FM: ‘FM’ } } ]});        });           

    thanks guys.

    • Istvan Halmen

      You should attach the scroller to an input element instead of a select element. You may also need a formatResult and a parseValue function depending on what do you want to display in the input field.
      If you have further questions, post it in

  • Good idea, but in my Galaxy Note on Chrome I got noticeable slow motion.

  • Jerry

    Is there a way to grab the value of the first wheel before you hit set? I’m trying to have the 2nd wheel options to be relative to the first wheel….seems kind of difficult to do in respect. Since I’m trying to make a zip picker that you can select state, and relative to state is city that way you get the zipcode.

  • Jerry

    nvm….I realized there’s an on change function….I’ll try and see it that’ll work.

  • I have an issue with a scroller on which past dates can not be selected. I would like for the year to automatically increment when someone goes from Dec. 2012 to Jan. 2013 by clicking the month scroller. As it is right now, it just goes from Dec. 2012 back to Nov. 2012, and that’s not very intuitive. Any idea where I could implement this and how?