General Calendar Cards Color Date & Time Event Calendar Forms Grid Layout Image Listview Measurement Navigation Number Numpad Option List Page Popup Range Scroller Scrollview Select Timer Timespan Treelist 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
angular
    .module('demoApp', ['mobiscroll-datetime'])
    .controller('demoController', ['$scope', function ($scope) {
        $scope.settings = {
            onSet: function (event, inst) {
                var selectedDate = inst.getVal(); // Call the getVal method
            }
        };
    }]);

2. Using the 'mobiscroll-instance' directive

Javascript
angular
    .module('demoApp', ['mobiscroll-datetime'])
    .controller('demoController', ['$scope', function ($scope) {
        $scope.showInstance = function () {
            $scope.myInstance.show();
        }
    }]);
HTML
<div ng-app="demoApp" ng-controller="demoController">
    <input ng-model="mydate" mobiscroll-date="settings" mobiscroll-instance="myInstance">
    <button ng-click="showInstance()">Show</button>
</div>

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 runtime (changing options dynamically)

There are two ways to modify options after initalization

  1. 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).

    Here is an example for the dynamic option change
    angular
        .module('demoApp', ['mobiscroll-scroller'])
        .controller('demoController', ['$scope', function ($scope) {
            // Modify options
            $scope.changeOptions = function () {
                $scope.myInstance.option({ 
                    theme: 'mobiscroll', 
                    lang: 'de' 
                });
            };
        }]);
    The markup for the controller
    <div ng-app="demoApp" ng-controller="demoController">
        <input mobiscroll-scroller mobiscroll-instance="myInstance"/>
        
        <button ng-click="changeOptions()">Change options</button>
    </div>
  2. Modify directly the settings object.

    Useful when changing dynamic settings, which do not need redraw (e.g. readonly, calendar marked days).

    // Get instance and modify a setting
    $scope.myInstance.settings.readonly = true;
    
    // Modify settings in an event
    $scope.settings = {
        onBeforeShow: function (event, inst) {
            inst.settings.readonly = true;
        }
    };
    The markup for the controller
    <div ng-app="demoApp" ng-controller="demoController">
        <input mobiscroll-scroller="settings" mobiscroll-instance="myInstance"/>
    </div>