Range

• '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: function (event) {
            alert('Custom button clicked!');
        }
    },
    'cancel'
]

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

Controls the direction the calendar can be navigated. You can navigate by scrolling, swiping or by clicking the arrow buttons in the header.

• 'horizontal' - navigating the view horizontally.
• 'vertical' - navigationg the view vertically.

When navigation is 'vertical' the outer days (days from previous and next months) are hidden. You can explicitly override it with the showOuterDays option.

• 'gregorian'
• 'jalali' - Default system of the Persian calendar. Farsi language needs to be included to the package.
• 'hijri' - Arabic language needs to be included to the package.

• exact dates, both start and end dates - javascript Date objects , ISO 8601 strings, or moment objects for multi-day colors:
  { start: new Date(2014, 5, 5), end: new Date(2014, 5, 7), background: 'red' }
• exact dates - javascript Date objects , ISO 8601 strings, or moment objects .
  { d: new Date(2014, 5, 5), background: 'red' }
• days of week - number of week day (0 - 6) prefixed with 'w', e.g. 'w0', 'w6'.
• days of month - number (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th December).

colors: [
    { d: new Date(2012,5,4), background: 'pink' },
    { d: new Date(2012,5,13), background: 'green' },
    { d: 'w0', background: 'yellow' },
    { d: 'w6', background: 'yellow' },
    { d: '5/1', background: 'red' },
    { d: '12/24', background: '#ff0000' },
    { d: '12/25', background: 'red' }
]

• ['calendar'] - date range
• ['calendar', 'time'] - date and time range
• ['date', 'time'] - date and time range
• ['date'] - date range
• ['time'] - time range

defaultValue: [ new Date(2015,9,13), new Date(2015,9,23) ]

• '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.

• exact dates - javascript Date objects , ISO 8601 strings, or moment objects .
• days of week - number of week day (0 - 6) prefixed with 'w', e.g. 'w0', 'w6'.
• days of month - number (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th December).
• date range - { start: new Date(2014, 0, 27), end: new Date(2014, 2, 15) }
• time range - { start: '12:00', end: '15:00' }

invalid: [
    '1/1', // 1st of January disabled
    '12/24', // Christmas disabled
    '12/25', // Christmas disabled
    'w0', // Sundays disabled
    { start: '00:00', end: '08:00' }, // Every day
    { start: '16:00', end: '23:59' }, // Every day
    { d: 'w6', start: '00:00', end: '08:59' }, // Saturday
    { d: 'w6', start: '17:00', end: '23:59' }, // Saturday
    new Date(2015,10,3), // exact date
    new Date(2016,6,11) // exact date
]

• background String - Using background: 'none' will display the label text only, without background.
• color String - The color of the label. If background: 'none' is specified, it will define the text color of the label, otherwise the background color of the label.
• d Date, String, Number - The date of the label, which can be specified as one of the following:
  • Exact date. Can be a javascript date object, ISO 8601 string, or moment object.
  • Day of week - number of week day (0 - 6) prefixed with 'w':
    { d: 'w6', text: 'My event' }
  • Day of month - number (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. '12/24' means every year's 24th December):
    { d: 2, text: '2nd of the month' }
• start Date, String, Number - The start day of the label, for multi-day labels. Can be a javascript date object, ISO 8601 string, or moment object.
• end Date, String, Number - The end day of the label, for multi-day labels. Can be a javascript date object, ISO 8601 string, or moment object.
• text String - The text of the label.

labels: [{
    start: new Date(2012,4,4),
    end: new Date(2012,4,5),
    text: 'Conference',
    color: 'red'
}, {
    d: '12/25',
    text: 'Christmas'
}]

• 'liquid' - The calendar view expands to the maximum available width. In 'center' display mode it will also expand the height to the height of the viewport.
• 'fixed' - The width and height of the calendar is controlled by the calendarWidth and calendarHeight options.
• undefined - In 'top', 'bottom' or 'inline' display mode will default to 'liquid', otherwise to 'fixed'

• exact dates, both start and end dates - javascript Date objects , ISO 8601 strings, or moment objects for multi-day marks:
  { start: new Date(2014, 5, 5), end: new Date(2014, 5, 7) }
• exact dates - javascript Date objects , ISO 8601 strings, or moment objects .
• days of week - number of week day (0 - 6) prefixed with 'w', e.g. 'w0', 'w6'.
• days of month - number (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th December).

marked: [
    new Date(2012,5,4),
    new Date(2012,5,13),
    'w0',
    'w6',
    { d: '5/1', color: 'red' },
    { d: '12/24', color: '#ff0000' },
    { d: '12/25', color: 'red' }
]

mobiscroll.range('#mydate', {
    max: new Date(2015, 7, 14)
});

mobiscroll.range('#mydatetime', {
    controls: ['calendar', 'time'],
    max: new Date(2015, 7, 14, 16, 57)
});

mobiscroll.range('#mytime', {
    controls: ['time'],
    max: new Date(2000, 0, 1, 16, 57)
});

// OR

mobiscroll.range('#mytime', {
    controls: ['time'],
    max: new Date(new Date().setHours(16, 57, 0, 0))
});

mobiscroll.range('#mydate', {
    min: new Date(2015, 7, 14) });

mobiscroll.range('#mydatetime', {
    controls: ['calendar', 'time'],
    min: new Date(2015, 7, 14, 16, 57)
});

mobiscroll.range('#mytime', {
    controls: ['time'],
    min: new Date(2000, 0, 1, 16, 57)
});

// OR

mobiscroll.range('#mytime', {
    controls: ['time'],
    min: new Date(new Date().setHours(16, 57, 0, 0))
});

• 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'
    }
}

• 'jsdate' - Javascript date object
• 'iso8601' - ISO 8601 date string.
• 'locale' - Formatted date string based on the lang setting, or the dateFormat and timeFormat settings, if they are specified.
• 'moment' - moment object. Ensure that moment.js is loaded.

Show or hide days from previous and next months.

Outer days are automatically hidden if calendarScroll is set to 'vertical'.

• hour - steps between hours, 1 if not specified.
• minute - steps between minutes, 1 if not specified.
• second - steps between seconds, 1 if not specified.
• zeroBased - if true, values start from 0, otherwise from values taken from minDate, false if not specified

steps: { 
    minute: 15,
    second: 5,
    zeroBased: true
}

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.

invalid: [
    { start: '00:00', end: '23:59' }, // Invalid time
    { start: new Date(2018, 11, 21), end: new Date(2018, 11, 31) } // Invalid date
],
valid: [
    { start: '09:00', end: '20:00' }, // Valid time
    { start: new Date(2018, 11, 26), end: new Date(2018, 11, 30) } // Valid date
]

• 'year' - Display week number in the year
• 'month' - Display week number in the month

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 range.

Example

mobiscroll.range('#mobiscroll', {
    onBeforeClose: function (event, inst) {
    }
});

Parameters

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

Example

mobiscroll.range('#mobiscroll', {
    onBeforeShow: function (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 range.

Example

mobiscroll.range('#mobiscroll', {
    onCancel: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: The selected date as a Date object.
  • marked: If the day is marked, contains the marked objects for the hovered day.
  • selected: Specifies if the day is currently selected or not.
  • target: The table cell HTML DOM element.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onCellHoverIn: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: The selected date as a Date object.
  • marked: If the day is marked, contains the marked objects for the hovered day.
  • selected: Specifies if the day is currently selected or not.
  • target: The table cell HTML DOM element.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onCellHoverOut: function (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 range.

Example

mobiscroll.range('#mobiscroll', {
    onChange: function (event, inst) {
    }
});

Parameters

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

Example

mobiscroll.range('#mobiscroll', {
    onClear: function (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 range.

Example

mobiscroll.range('#mobiscroll', {
    onClose: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • active: Specifies which date will be selected ('start' or 'end')
  • date: The selected date as a Date object.
  • marked: If the day is marked, contains the marked object passed in the settings, otherwise false.
  • selected: Specifies if the day is currently selected or not (before the current selection).
  • target: The table cell HTML DOM element.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onDayChange: function (event, inst) {
    }
});

Parameters

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

Example

mobiscroll.range('#mobiscroll', {
    onDestroy: function (event, inst) {
    }
});

Parameters

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

Example

mobiscroll.range('#mobiscroll', {
    onInit: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • target: HTMLElement - The DOM element of the tapped item.
  • selected: Boolean - Selected state of the tapped item.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onItemTap: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: Date - The date clicked.
  • domEvent: Event - The click/tap DOM event.
  • label: Object - The original object of the label which was clicked, undefined in case of the "more" label.
  • labels: Array - An array containing each label object for the given day.
  • target: HTMLElement - The DOM element of the label.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onLabelTap: function (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 range.

Example

mobiscroll.range('#mobiscroll', {
    onMarkupReady: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day of the displayed page.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onPageChange: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day of the displayed page.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onPageLoaded: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following property:
  • firstDay: Date - The first day of the displayed page.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onPageLoading: function (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 range.

Example

mobiscroll.range('#mobiscroll', {
    onPosition: function (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 range.

Example

mobiscroll.range('#mobiscroll', {
    onSet: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • date: The selected date as a Date object
  • active: Specifies which date was selected ('start' or 'end')
  • control: The control on which the date was selected: calendar, date or time. It will be undefined on initial show, or if date was set programmatically.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onSetDate: function (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 range.

Example

mobiscroll.range('#mobiscroll', {
    onShow: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • tab: String - Can be 'calendar', 'date' or 'time'.
• inst: Object - The instance object of the range.

Example

mobiscroll.range('#mobiscroll', {
    onTabChange: function (event, inst) {
    }
});

Example

mobiscrollInstance.cancel();

Parameters

• tab: String - Can be 'calendar', 'date' or 'time'.

Example

mobiscrollInstance.changeTab('calendar');

Example

mobiscrollInstance.clear();

Returns: Object

• Returns the element back to its pre-init state.

Example

mobiscrollInstance.destroy();

Example

mobiscrollInstance.disable();

Example

mobiscrollInstance.enable();

Returns: Object

• The object instance.

Example

mobiscrollInstance.getInst();

Parameters

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

Returns: Array

• An array containing the start date and end date objects.

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

• date: Date - Date to navigate to.
• animate (Optional): Boolean - If true, navigate will be animated.

Example

mobiscrollInstance.navigate(new Date(2016, 1, 1));

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.redraw();

Example

mobiscrollInstance.refresh();

Example

mobiscrollInstance.select();

Parameters

• active: String - Currently selected date. It can be 'start' or 'end'.

Example

mobiscrollInstance.setActiveDate('start');

Parameters

• values: Array -values must be an array with two date objects, start date and end date.
• 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 values are 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.
is omitted or 0.

Example

mobiscrollInstance.setVal([new Date(2016, 1, 1), new Date(2016, 1, 7)]);

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!"); });

• m - month of year (no leading zero)
• mm - month of year (two digit)
• M - month name short
• MM - month name long
• d - day of month (no leading zero)
• dd - day of month (two digit)
• D - day of week (short)
• DD - day of week (long)
• y - year (two digit)
• yy - year (four digit)
• '...' - literal text
• '' - single quote
• anything else - literal text

dateWheels: '|D M d|' // Will produce 'Sun Sep 9'
            

• 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'

• h - 12 hour format (no leading zero)
• hh - 12 hour format (leading zero)
• H - 24 hour format (no leading zero)
• HH - 24 hour format (leading zero)
• i - minutes (no leading zero)
• ii - minutes (leading zero)
• s - seconds (no leading zero)
• ss - seconds (leading zero)
• a - lowercase am/pm
• A - uppercase AM/PM
• '...' - literal text
• '' - single quote
• anything else - literal text

timeWheels: '|h:ii A|' // Will produce '9:12 AM'