General Date & Time pickers Event Calendar Form components Responsive list Numeric pickers Pickers & dropdowns Layout & navigation Tools Accessibility

Welcome to the Mobiscroll API Reference. You can find the most up to date information about usage and customization options here.

Supported Platforms - Android 4.1+ including Android 13, iOS 7+ including iOS 16 and all major desktop browsers, including Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+ and Internet Explorer 10+.

Having trouble? Ask for help.

Getting Started with Mobiscroll for Javascript

Mobiscroll is a collection of UI components that helps deliver great mobile apps, websites with a great user experience and in getting five-star app store reviews. The controls follow platform UX guidelines and can be styled with the Theme Builder for a perfect fit.

To get started, follow these simple steps.

1. Download Mobiscroll

When building your package, select the required components on the download page.

2. Load the necessary scripts

<script src="js/mobiscroll.javascript.min.js"></script>
<link href="css/mobiscroll.javascript.min.css" rel="stylesheet" type="text/css">

3. Add an input to your HTML markup

<input id="scroller" />

4. Initialize your component

Default time picker
// create a datepicker with default settings'#scroller');
Default time picker
// create a timepicker with default settings
Default datetime picker
// create a datetimepicker with default settings

For more examples check out the demo page.

Using module loaders

Mobiscroll can be loaded as a module as well. It implements the Universal Module Definition (UMD) pattern, meaning that it can be used with module loaders supporting the Asynchronous Module Definition (AMD) (e.g. RequireJS, Webpack, SystemJS) or CommonJS (e.g. Browserify, Webpack, SystemJS) syntax.

To load Mobiscroll as a module, download the mobiscroll package and use it as you would use any other module:

CommonJS example
var mobiscroll = require('path/to/mobiscroll/js/mobiscroll.javascript.min');'#test');
AMD example
require(['path/to/mobiscroll/js/mobiscroll.javascript.min'], function (mobiscroll) {'#test');

Global Settings



The global mobiscroll object is the place where you can set all the options that you'll be needing across your application or page. It should contain the settings that need to be the same across all components.

// Sets the theme to iOS and localization to German
mobiscroll.settings = {
    theme: 'ios',
    lang: 'de'