General
Getting Started
Quick Install
Using with Cordova
Using with Vue.js
Mobiscroll CLI
ES6 Modules
Instance
Utility functions
Upgrade Guide v3
Date & Time pickers
Event Calendar
Form components
Alerts & Notifications
Buttons
Checkbox
Dropdown
Forms
Progress
Radio Buttons
Segmented
Slider
Stepper
Switch
Textfields
Timer
Responsive list
Numeric pickers
Pickers & dropdowns
Layout & navigation
Tools
Accessibility
Mobiscroll Instance
When a mobiscroll component is initialized, an instance of the component is created. Through the instance you have access to all methods and properties of the component.
There are multiple ways to access the instance of an individual component.
1. Inside events
The mobiscroll instance is passed as parameter for every event of the component.
Sample usage
mobiscroll.date('#mydate', {
onSet: function (event, inst) {
var selectedDate = inst.getVal(); // Call the getVal method
}
})
2. Initialization
The instance is returned by the component's initialization:
var inst = mobiscroll.date('#mydate');
inst.show(); // Call the show method
3. Through active instance
Stores the currently active mobiscroll instance (expcept inline instances), or null if there is no active instance.
mobiscroll.activeInstance
Setting options dynamically
There are two ways to modify options after initalization
-
Using the option method.
The option method always triggers reinitialization. Most of the settings can be updated only this way, updating without initialization has no effect, because the markup is already generated. If the scroller was visible, the reinitialization hides it and it's not shown again automatically (except in inline display mode).
Javascript// Modify options mobiscrollInstance.option({ theme: 'ios', lang: 'de' });HTML<input id="mobiscroll"/> -
Modify directly the
settingsobject.
Useful when changing dynamic settings, which do not need redraw (e.g. readonly, calendar marked days).
// Modify a setting mobiscrollInstance.settings.readonly = true; // Modify settings in an event mobiscroll.scroller ('#mobiscroll', { onBeforeShow: function (event, inst) { inst.settings.readonly = true; } });