Numpad

• 'fade'
• 'flip'
• 'pop'
• 'swing'
• 'slidevertical'
• 'slidehorizontal'
• 'slidedown'
• 'slideup'

• 'set' - Sets the value.
• 'clear' - Clears the value.
• 'cancel' - Dismisses the popup.

• text String - Text of the button.
• handler String, Function - The function which will run when the button is pressed. If a string, it must be one of the predefined button handlers:
  • 'set' - Sets the value.
  • 'clear' - Clears the value.
  • 'cancel' - Dismisses the popup.
• icon String (Optional) - Icon of the button.
• cssClass String (Optional) - Css class of the button.

buttons: [
    'set',
    {
        text: 'Custom',
        icon: 'checkmark',
        cssClass: 'my-btn', 
        handler: (event) => {
            alert('Custom button clicked!');
        }
    },
    'cancel'
]

buttons: [
    'set',
    {
        text: 'Hide',
        handler: 'cancel',
        icon: 'close',
        cssClass: 'my-btn'
    }
]

• 'center' - The component appears as a popup at the center of the viewport.
• 'inline' - If called on div element, the component is placed inside the div (overwriting existing content), otherwise is placed after the original element.
• 'bubble' - The component appears as a bubble positioned to the element defined by the anchor option. By default the anchor is the original element.
• 'top' - The component appears docked to the top of the viewport.
• 'bottom' - The component appears docked to the bottom of the viewport.

• 'rtl' - Right to left
• 'ltr' - Left to right

• 'liquid' - The popup will expand to the maximum available width.
  In 'center' and 'bubble' display mode it will also leave some space on the left and right edges, and will not exceed 600px width on larger screens.
  In 'top', 'bottom' and 'inline' display mode this is the default behavior.
• 'fixed' or undefined - Popup will have a fixed width, depending on the content, and not on the viewport size.

• text - The text of the button.
• value - One or more digit values which will be filled into the template when pressed, e.g. '00', or '30'.
• variable - Specifies a value for a variable present in the template in '{variable}:{value}' format, e.g. 'ampm:AM'.

leftKey: {
    text: 'AM',
    variable: 'ampm:AM',
    value: '00'
}

• 'decimal' - To enter decimal values between min and max with given precision. See the available options.
• 'timespan' - To enter a time value in hours, minutes, seconds format. See the available options.
• 'time' - To enter a time. See the available options.
• 'date' - To enter a date. See the available options.

• xsmall - min-width: 0px
• small - min-width: 576px
• medium - min-width: 768px
• large - min-width: 992px
• xlarge - min-width: 1200px

responsive: {
    small: {
        display: 'bottom'
    },
    custom: { // Custom breakpoint
        breakpoint: 600,
        display: 'center'
    },
    large: {
        display: 'bubble'
    }
}

• text - The text of the button.
• value - One or more digit values which will be filled into the template when pressed, e.g. '00', or '30'.
• variable - Specifies a value for a variable present in the template in '{variable}:{value}' format, e.g. 'ampm:PM'.

rightKey: {
    text: 'PM',
    variable: 'ampm:PM',
    value: '00'
}

Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform.

If the theme for the specific platform is not present, it will default to the Mobiscroll theme.

• 'bootstrap' - Bootstrap themes
• 'ios' - iOS theme
• 'material' - Material theme
• 'mobiscroll' - Mobiscroll theme
• 'windows' - Windows theme

Controls which variant of the theme will be used (light or dark).

• 'light' - Use the light variant of the theme.
• 'dark' - Use the dark variant of the theme.
• 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

If not set, only the theme setting will determine which theme to use.

To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

Use true to render a touch optimized user interface, or false for a user interface optimized for pointer devices (mouse, touchpad).

Can be used with the responsive option to change the user interface based on viewport width.

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
  • button: String - The name of the button which triggered the component to close ('set', or 'cancel').
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onBeforeClose: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onBeforeShow: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onCancel: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onClear: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onClose: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onDestroy: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onInit: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object with the following properties
  • domEvent: Event - The DOM event object.
  • target: HTMLElement - The DOM element of the pressed button.
  • values: Array - An array containing the currently entered digits.
  • valueText: String - The entered value as formatted text.
  • variables: Object - An object containing the currently entered variables.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onInput: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onMarkupReady: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
  • windowWidth: Number - The window width.
  • windowHeight: Number - The window height.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onPosition: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text (if any).
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onSet: (event, inst) => {
        }
    }
}

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the numpad.

Example

export class MyExample {
    settings: any = {
        onShow: (event, inst) => {
        }
    }
}

Parameters

• data: Object - The data object has the following properties:
  • values: Array - An array containing the currently entered digits.
  • variables: Object - An object containing the currently entered variables.
• inst: Object - The instance object of the numpad.

• disabled: Array - An array containing the digits that should be disabled.
• invalid: Boolean - If true, the component state will be invalid, so the value will not be selected. The set button will be also disabled, if present.

Example

$('#mobiscroll').mobiscroll().numpad({
    validate: function (data, inst) {
    }
});

Example

mobiscrollInstance.cancel();

Example

mobiscrollInstance.clear();

Example

mobiscrollInstance.disable();

Example

mobiscrollInstance.enable();

Parameters

• temp (Optional): Boolean - If true, temporary values are returned (prior clicking the Set button).

Returns: Array

• An array containing the digits.

Example

mobiscrollInstance.getArrayVal();

Parameters

• temp (Optional): Boolean - If true, returns the temporary values (prior clicking the Set button).

Returns: String

• The selected numpad value.

Example

mobiscrollInstance.getVal();

Parameters

• prevAnim (Optional): Boolean - If true, hide will not be animated.
• btn (Optional): String - Specifies which button caused the component to hide, and it's passed to the onBeforeClose event.

Example

    mobiscrollInstance.hide();
    

Returns: Boolean

• True if the component is visible, false if it's not.

Example

mobiscrollInstance.isVisible();

Parameters

• options: Object - A map of option-value pairs to set.

Example

mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});

Parameters

• check (Optional): Boolean - If true, the function checks if viewport size changed after last position call, if false or ommitted, position is recalculated anyway.

Example

mobiscrollInstance.position();

Example

mobiscrollInstance.select();

Parameters

• value: String - The numpad value.
• fill (Optional): Boolean - If true, the associated input element is also updated with the new value.
• change (Optional): Boolean - If false, change event won't be triggered on the input element.
• temp (Optional): Boolean - If true, only temporary value is set.
• time (Optional): Number - Specifies the duration of the animation in seconds to scroll the wheels to the new values. There is no animation, if time is omitted or 0.

Example

mobiscrollInstance.setVal('9.25');

Parameters

• prevAnim (Optional): Boolean - If true, show will not be animated.
• prevFocus (Optional): Boolean - If true, the popup will not be focused right after show.

Example

mobiscrollInstance.show();

Parameters

• el: Object - The element with tap event.
• handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

• Arabic: 'ar'
• Bulgarian: 'bg'
• Catalan: 'ca'
• Czech: 'cs'
• Chinese: 'zh'
• Croatian: 'hr'
• Danish: 'da'
• Dutch: 'nl'
• English: 'en' or 'en-US' or undefined
• English (UK): 'en-UK' or 'en-GB'
• Farsi: 'fa'
• German: 'de'
• Greek: 'el'
• Spanish: 'es'
• Finnish: 'fi'
• French: 'fr'
• Hebrew: 'he'
• Hindi: 'hi'
• Hungarian: 'hu'
• Italian: 'it'
• Japanese: 'ja'
• Korean: 'ko'
• Lithuanian: 'lt'
• Norwegian: 'no'
• Polish: 'pl'
• Portuguese (Brazilian): 'pt-BR'
• Portuguese (European): 'pt-PT'
• Romanian: 'ro'
• Russian: 'ru'
• Russian (UA): 'ru-UA'
• Slovak: 'sk'
• Serbian: 'sr'
• Thai: 'th'
• Swedish: 'sv'
• Turkish: 'tr'
• Ukrainian: 'ua'
• Vietnamese: 'vi'

formatValue: (numbers) => {
    var ret = '';

    // Add leading zeroes if necessary
    if (numbers[0] == '.') {
        numbers.unshift(0);
    }

    ret = numbers.join('').split(this.decimal);

    ret[0] = ret[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.thousands);

    return ret.join(this.decimal);
}

parseValue: (value) => {
    if (value) {
        return value.toString().replace(this.thousands, '').split('');
    }

    return [];
}