jQuery Plugins › jQuery Time & Clock Plugins › jQuery Mobiscroll

Stylish jQuery Date and Time Picker For Mobile Devices - mobiscroll

File Size: 1.14 MB
Views Total: 34543
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP 30 jQuery Plugins 2023

Chrome, IE9+, FireFox, Opera, Safari#Date Picker#Date#jQuery Mobile
Stylish jQuery Date and Time Picker For Mobile Devices - mobiscroll

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

Features:

  • 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

Installation:

# NPM
$ npm install mobiscroll

# Bower
$ bower install mobiscroll

Basic Usage:

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

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<link href="mobiscroll.custom.min.css" rel="stylesheet">
<script src="js/mobiscroll.min.js"></script>

2. Create a input field

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

3. Create a datetimepicker with default settings

$("#scroller").mobiscroll().datetime();

Changelog:

v4.4.1 (2018-10-18)

  • bug fixes

v4.1.1 (2018-04-06)

  • update

v4.0.0beta (2017-12-01)

  • update

v3.2.6 (2017-11-06)

  • update

v3.1.0 (2017-03-31)

  • Introducing ES6 modules.
  • If destroy method was called on an open popup, the DOM was not cleared up properly.
  • Fixed: Fallback to 2D scroll with iOS theme in IE10 and IE11.
  • Fixed: dateWheels setting is taken into account to define the order of year and month in the calendar header.
  • Fixed: Keep already selected time information for start and end dates.
  • Fixed: Invalid times were set for the range, even if the wheels were scrolled to valid values.
  • data option now accepts an object where remote data source settings can be defined.
  • New filter option. If true a filter input will be shown above the wheels. Typing in the input will filter the wheel values.
  • Fixed: Inline multiple select did not always update the select value correctly on selection.
  • Hover styling and proper mouse cursor styling for segmented and stepper controls for a better desktop experience.
  • Block (mbsc-btn-group-block) and justified (mbsc-btn-group-justified) button groups.
  • Fixed: Display pointer cursor on desktop for the toggle password icon.
  • Fixed: Description text color, switch color contrast improvements.
  • Fixed: Improved jQuery Mobile compatibility on input styling.
  • Fixed: Phantom selection remains after refine.
  • Fixed: In multiple selection mode selected colors remained selected after cancel.
  • Fixed: Remove scroll event listener from window on destroy only if it was attached.
  • Fixed: navigate method failed with error for items added dynamically on top level.
  • Fixed: Don't consider list item visible, if it's partially out of view, when using the navigate method.
  • Simplify generated markup by using flexbox layout.
  • Hover styling for a better desktop experience.
  • Fixed: Navigation fixes in RTL mode.
  • A component for basic page styling (background, typography, spacing for top/bottom menustrips).
  • Fixed: cancel button displayed the closeText instead of cancelText.
  • Fixed: Radio button rendering glitch if the positioning of the widget contained fractional pixel values.
  • Fixed: Re-position correctly after resize or orientation change if widget contains content with responsive width styling.
  • Fixed: Button icons were not showing for the Windows Phone theme.
  • Fixed: Added setting to React Listview for data keys.
  • Added missing instance binding to Knockout forms.

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 acidb. For more Advanced Usages, please check the demo page or visit the official website.