A repository of over 1000 quality jQuery plugins

jQuery jQuery Mobile Datebox

jQuery Mobile Datebox is a jQuery Date & Time plugin.

Created by Jtsage

A multi-mode date and time picker for jQueryMobile, Bootstrap, & jQueryUI

Not what you're looking for? Click here to view more Date & Time jQuery plugins


DateBox is a jQuery date and time picker. Full Documentation and Demos, that works with jQueryMobile, Bootstrap, and/or jQueryUI.

DateBox Features

  • Framework Agnostic, works with jQM, jQueryUI & Twitter Bootstrap
  • Multiple display and entry modes for dates, times, and durations
    • Android style
    • Full Calendar display (date only)
    • Flip (IOS) style
    • Slide style (date and time only)
  • Multiple window modes (dependant on framework)
    • Popup or Dropdown
    • Inline
    • Inline window-blind
  • Fully localized - 40+ languages pre-configured
  • Fully custiomizable output formats
  • Supports multiple methods of limiting valid date entry
  • Supports entry, exit, creation, selection, change, and more programming hooks

Special Thanks

An extra special thanks to Phill Pafford for answering tons of questions about DateBox, and jQueryMobile in general on StackOverflow.

And last but not least, thanks to all the contributors to the project on github.


All scripts are available on the cdn:

DateBox uses the following version scheme:


Latest Versions:

cdn repo

Custom Download Builder:

script css

Suggested Use

With Option Overrides:

<input type="date" data-role="datebox" name="somedate"
    data-options='{"mode": "datebox", "overrideDateFormat": "%m/%d/%Y"}' />

Global Option Overrides:

// AFTER loading jQM
jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
    'overrideDateFormat': '%d.%m.%Y',


JTSage-DateBox is fully compatible with the old jQM-DateBox, just replace the jQM-DateBox sources with the new source file.

If you have written any of your own code referencing jQM-DateBox, note that the namespace of the plugin has changed to "jtsage".

// Old Way - Data Attribute
$( "#someInput" ).data('mobile-datebox');

// New Way - Data Attribute
$( "#someInput" ).date('jtsage-datebox');

// Old Way - Prototype Overrides
jQuery.extend(jQuery.mobile.datebox.prototype.options, {} );

// New Way - Prototype Overrides
jQuery.extend(jQuery.jtsage.datebox.prototype.options, {} );

Available Options

Please see the full api documentation at: dev.jtsage.com

Runtime Operation (Scripting / Extending)

Please see the full api documentation at: dev.jtsage.com

You might also like these other Date & Time jQuery Plugins

  • timedropper

    timedropper is a jQuery UI timepicker. Manage time input fields in a standard form. Focus on the input to open […]

  • jClocksGMT.js

    jClocksGMT is a jQuery analog and digital clock(s) plugin based on GMT offsets. Perfect for world clocks. Now supporting automatic [&hell...

  • bootstrap-year-calendar

    A fully customizable year calendar widget, for jQuery and bootstrap.