MobiScroll

MobiScroll allows dates and time values to be selected using rotational counters.

By default, the MobiScroll package grants access to a quick date and time picker widget.

Buying a commercial license gives access to the full MobiScroll API, which will allow developers to build more customized components. Additionally it grants access to a big list of pre-made components for picking other options than dates and time (temperature, options from a list, timer animations, etc.).

A working demo is included with the download package.

What is new in this release:

• New:
• mobiscroll-data attribute added to Angular listview integration for filter support.
• mobiscroll-instance attribute added to Angular directives for better accessibility.
• Added menustrip helper to ASP.NET MVC integration.
• Fixed:
• Kendo mobiscroll-color and mobiscroll-range bindings were not working.
• Group select was not working with Angular, if generated with ng-repeat.

What is new in version 2.15.1:

• New:
• mobiscroll-data attribute added to Angular listview integration for filter support.
• mobiscroll-instance attribute added to Angular directives for better accessibility.
• Added menustrip helper to ASP.NET MVC integration.
• Fixed:
• Kendo mobiscroll-color and mobiscroll-range bindings were not working.
• Group select was not working with Angular, if generated with ng-repeat.

What is new in version 2.15.0:

• New:
• mobiscroll-data attribute added to Angular listview integration for filter support.
• mobiscroll-instance attribute added to Angular directives for better accessibility.
• Added menustrip helper to ASP.NET MVC integration.
• Fixed:
• Kendo mobiscroll-color and mobiscroll-range bindings were not working.
• Group select was not working with Angular, if generated with ng-repeat.

What is new in version 2.14.0:

• New:
• API cleanup: setVal and getVal methods added to all components for setting and getting the selected value(s), instead of getValue, setValue, getValues, setValues, getDate, setDate`.
• API cleanup: setArrayVal and getArrayVal methods for getting and setting the 'raw' wheel value array (for scroller components), or the 'raw' number array (for numpad components).
• Disable page scroll with mousewheel in desktop browsers, when the popup is visible.
• Support for predefined button handlers: 'set', 'cancel', 'clear', 'now', e.g. buttons: [ { text: 'Hide', handler: 'cancel' } ].
• Support for custom button classes, use btnClass to specifiy the css class for all buttons, or set the cssClass property of the individual button, e.g. buttons: [ { text: 'Set', handler: 'set', cssClass: 'my-btn' } ].
• Support for button icons, use the icon property of the individual button, e.g. buttons: [ { text: 'Set', icon: 'checkmark', handler: 'set' } ].
• Show is called on tap instead of click for faster response.
• Removed:
• $.scroller is no longer supported, use $.mobiscroll instead.
• Setting false for setText and cancelText in order to hide the Set and Cancel buttons is no longer supported. Use the buttons setting instead.

What is new in version 2.12.0:

• jQuery Mobile theme fix.

What is new in version 2.10.0:

• Added:
• Support right to left languages with the RTL setting.
• Support for displaying icons on marked days.
• Disabled property for stage or action setting.
• Support for hierarchical lists.
• Font icons are now used instead of images, icons can be changed with the iconFilled and iconEmpty settings.
• Placeholder setting for the generated input field.

What is new in version 2.9.4:

• Changed:
• Mobiscroll is focused on popup to make keyboard navigation easier.
• Using CSS flexible box model for wheel distribution. Falls back to table layout on devices without flex support (IE8 and IE9).
• Improved Firefox compatibility.
• Added:
• Layout setting, can be 'fixed' or 'liquid'.
• Multiline setting to wrap the wheel item content into multiple lines.

What is new in version 2.9.1:

• Added:
• Handle setting - allows sort if touch started on the handle.
• Fixed:
• btn parameter was undefined in onClose if clear button was pressed.
• Directive for select preset now works for dynamically generated options.
• Slide was not working in Android 4.0.x.
• Range picker incorrect bubble positioning with start and end inputs present.

What is new in version 2.9.0:

• Added:
• onStageChange event.
• onItemTap event.
• onSlideEnd event.
• slideIcon setting - icon and text can be positioned to move with the slided element.
• quickSwipe setting - on quick swipe (less than 300ms and 50px of movement) the first stage's action is executed.
• Holding month and year buttons changes month/year until released.
• Months setting to display multiple months.

What is new in version 2.8.2:

• Added: sort setting for reordering lists with onSortStart, onSortStop, onSort, onChange, onUpdate events.
• Improved: add and remove animations.

What is new in version 2.7.0:

• Changed:
• Mobiscroll value is automatically updated on input change, this way setValue method is working properly.
• Added:
• Utility object exposing some useful variables, currently vendor prefix and 3d support ($.mobiscroll.util.prefix and $.mobiscroll.util.has3d).
• onDestroy event.

What is new in version 2.6.2:

• Fixed:
• Tap was not removed from element on destroy.
• Mouse scroll wheel now works with Zepto and jqMobi.
• Whitespace after buttons in Firefox.

What is new in version 2.6.0:

• Changed:
• Refactored method calls resulting in smaller file size.
• New wheel format using arrays instead of objects to maintain the order of items. Old wheel format is still supported, but deprecated. See documentation for details.
• Cleaned up CSS.
• Position method is now public.

What is new in version 2.5.4:

• Transition is done by directly editing the property instead of the style attribute.

What is new in version 2.5.2:

• Fixed:
• Could not scroll if scroller was bigger than viewport.

What is new in version 2.5.1:

• Added:
• onAnimStart event.
• onMarkupInserted event.

What is new in version 2.1:

• Changed:
• changeWheel function can change more than one wheel at once.
• Added:
• ‘rtl' (right to left) option, when set to true the group wheel appears on the right.

What is new in version 2.0.3:

• Added support for language files. Controlled from ‘lang' option. Specify language related default settings and language files.

What is new in version v2.0.2:

• Added:
• Animation time is now passed to the validation event (useful, if you want an action to happen only when the wheel stops moving)
• Wheel containers have now numbered classes: ‘dwwl0', ‘dwwl1', ‘dwwl2' etc. to allow different styling for each wheel
• ‘invalid' option to set certain values unselectable. This option takes precedence over the disabled options in the original html select element.
• ‘label' option to set the label of the wheel. If not present, the label is taken from the original html select element's label, and falls back to the select element's name attribute, if the label doesn't exist
• Fixed:
• Button appearance with JQM 1.1.1
• ‘setValue' and ‘getValue' methods overwrote the core methods and were unusable for other presets or custom scrollers
• Zepto js plugin
• In ‘mixed' mode clicking on the +/- buttons caused a short button blink
• If day was not present on the wheels (e.g. credit card expration), the date object defaulted to today's date, which resulted in incorrect value, if current month had more days as the selected month
• Day names were incorrect, if initial validation changed the month from an invalid value to the nearest valid one

What is new in version v2.0.1:

• Fixed:
• HTML5 min/max attributes propagated to other scrollers
• jQuery Mobile 1.0 compatibility (Issue 95)
• Using values like "1.0", "2.0", etc. on custom wheels caused incorrect behavior because they were converted to numbers and became 1, 2, etc.
• Fast scrolling caused value loss, if validation changed another wheel value with animation
• When element was created for 3d testing: document.createElement(mod) - mod was undefined
• setValue and getValue was not working correctly with the select preset
• timeWheels option did not modify the order of the wheels

What is new in version v1.6:

• Mixed Mode Picker (ClickPick + Scroller).
• Customization options of the popup.
• New Ice Cream Sandwich Light & Dark themes.

What is new in version v1.5.3:

• Third bugfix release for 1.5.

What is new in version v1.0.2:

• Second bugfix release for 1.0.

Requirements:

• JavaScript enabled on client side
• jQuery 1.6 or higher