Stylish jQuery Date and Time Picker For Mobile Devices - mobiscroll

Stylish jQuery Date and Time Picker For Mobile Devices - mobiscroll
File Size: 145 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

mobiscroll is a stylish and highly customizable jQuery based time & data picker for mobile devices that you can easily pick date or time via touch events.


  • 9 themes: default, Android, Android ICS Light, Android ICS, iOS, jQuery Mobile, Sense UI, Windows Phone Light and Windows Phone.
  • 3 Modes: scroller, clickpick, and mixed.
  • Various display methods: modal, inline, bubble, top, etc.
  • Multi-language supported

Basic Usage:

1. Include the latest jQuery library and jQuery Mobiscroll plugin on the page

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

2. Create a input field

<input id="scroller" name="scroller" />

3. Create a datetimepicker with default settings


Change logs:

v2.13.2 (2014-10-08)

  • Fixed: mousemove and mouseup events were incorrectly detached on swipe end.
  • Fixed: Popup was outlined on Chrome / OSX.
  • Fixed: Sort handle was generated for group headers.
  • Fixed: Incorrect null value support.

v2.13.1 (2014-09-24)

  • New: Accessibility enhancements: read full date for every day, announce month and year on month navigation, read events and event duration.
  • New: Month and year selector.
  • Fixed: enable/disable functions.
  • New: Allow null value for each component.
  • New: Show /hide animation improvements: background overlay will fade in and out, faster and smoother animations.
  • Fixed: Time validation fix
  • New: scale setting which controls the decimal precision.
  • New: Datepicker preset.
  • New: min and max settings.
  • New: invalid setting.
  • New: headerText setting.
  • New: If the select is grouped and group setting is false, group labels will appear as list dividers.
  • New: If multiple selection is enabled, there is no empty space on the top and bottom of the wheel anymore, and value on the middle is not highlighted.

v2.12.0-beta (2014-07-08)

  • New: focusOnClose setting.
  • Fixed: Time was not set correctly if closeOnSelect was true.
  • Fixed: In fullscreen mode calendar was not full width.
  • New: onSetDate receives a day object with date and control (where the selection occured: 'calendar', 'date', 'time' or undefined) properties.
  • New: navigate method to display a specific month on the calendar without setting the date.
  • New: weekDays option to control the format of week days in the calendar header. Can be full, short or min.
  • Fixed: Native input and select elements inside list items were not working (#231).
  • Fixed: Be able to display multiple rows in group headers.
  • Fixed: 'ng-if' directive can be used inside li's with 'mbsc-' prefix
  • New: onNavStart and onNavEnd events on hierarchical navigation.
  • New: onItemTap event receives the event object as parameter.
  • New: A new control with numeric keys for filling numeric values.
  • New: minRange and maxRange settings for minimum and maximum selectable range.
  • New: onSetDate receives a day object with date, control (where the selection occured: 'calendar', 'date', 'time' or undefined), and active ('start' or 'end') properties (#222).
  • New: showSelector setting.
  • New: Brand new default theme.
  • New: Theme classes are prefixed with .mbsc- to make the classes less generic and avoid conflicts with other libraries.
  • New: iOS7 like checkmark icon for the iOS7 theme multiselection.
  • New: New wheel styles for jQuery Mobile and Bootstrap themes.

v2.11.0 (2014-05-15)

  • Added: rtl setting for right to left support.
  • Added: Support for invalid ranges.
  • Added: valid setting to override invalid dates.
  • Added: Persian translation and support for jalali dates.
  • Fixed: Support for data-val="0".
  • Added: Undo functionality.
  • Added: itemGroups setting for defining different settings (actions, stages, tap) for different list items.
  • Added: altRow setting for alternate line colors.
  • Added: fixedHeader setting for fixed group headers.
  • Changed: android-ics renamed to android-holo.
  • Windows Phone Theme
  • Changed: PNG images are replaced with font icons.

v2.10.0 (2014-04-22)

  • Added: preventFocus parameter for the show method.
  • Added: automatic liquid layout based on screen size.
  • Added: support for hiearchical listview in Knockout, Angular and Backbone integration plugins.
  • Fixed: Vertical alignment was incorrect with Windows Phone theme.

v2.10.0 (2014-04-11)

  • Enhancements and bugfixes.

v2.9.5 (2014-02-26)

  • Bugs fixed.

v2.9.4 (2014-02-26)

  • Enhancement and bugs fixed

v2.9.3 (2014-02-10)

  • Enhancement and bugs fixed

v2.9.2 (2014-01-21)

  • Enhancement and bugs fixed

v2.9.1 (2014-01-10)

  • Enhancement and bugs fixed

This awesome jQuery plugin is developed by mobiscroll. For more Advanced Usages, please check the demo page or visit the official website.