Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A multi-mode date and time picker for jQueryMobile, Bootstrap, & jQueryUI
Pull request Compare This branch is 592 commits behind master.
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
build Update gitignores, tag out 1.1.1
css Update durationbox to use grid-based layout (much cleaner, less cross…
demos Update i18n to upstream, add "th" code
external Fix typo, describe other folders (make github pretty!)
i18n Update i18n to upstream, add "th" code
img Images for custom mode
js Merge pull request #203 from oleyb/master
screens Update demos with "flipbox" and "timeflipbox", a few extra test cases…
tests Update gitignores, tag out 1.1.1
theme Update durationbox to use grid-based layout (much cleaner, less cross…
unit Turn on placeholder & new Style for all unit tests Some more demo fixes - path names this time
LICENSE Bring demos up to jquery 1.7, fix char encoding in LICENSE, clean up … Update readme.MD
index.html Add new mode: custombox - like customflip, but based on the android v…


DateBox is a jQuery-mobile based date and time picker. Full Documentation and Demos

DateBox Features

  • Multiple Data-Entry Modes:

    • Android style date picker
    • Calendar style date picker
    • Slide style date picker
    • Flip Wheel style date or time picker
    • 12 and 24 hour time picker
    • Duration time picker
  • 4 Different display modes:

    • Standard, click-outside-to-close popup mode
    • Forced input modal popup mode
    • Unique page dialog mode
    • Inline mode
  • Fully localized:

    • Configurable Month names
    • Configurable Day Names
    • All labels and buttons configuratble
    • Multiple languages can be loaded at once for dynamic reconfigure
  • Supports data-limiting of input:

    • Minimum and Maximum Years, Hours, number of days, etc...
    • Disabled days, dates, and hours, etc...
  • Automatically parses hand-entered or pre-entered dates on open

  • Auto-bind's to data-type='datebox', options are configurable via data-options.

Special Thanks

This is based in part on the work of Todd M. Horst, and his Android Like Date Picker 2

Some features inspired by mobiscroll - Specifically the IOS-ish flipbox.

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:<jqm VERSION>/

You must load:

  • jqm-datebox.core.js (or min)
  • AND:: jqm-datebox.mode.<yourmode>.js

OR (if using only one mode)

  • jqm-datebox.comp.<yourmode>.js

Latest Versions:

cdn repo

Suggested Use

With Option Overrides:

<input type="date" data-role="datebox" name="somedate"
    data-options='{"mode": "datebox", "overrideDateFormat": "mm/dd/YYYY"}' />

Global Option Overrides:

// AFTER loading jQM
jQuery.extend(, {
    'overrideDateFormat': '',

Available Options

Please see the full api documentation at:

Runtime Operation (Scripting / Extending)

Please see the full api documentation at:

Just-In-Time options updating

The following options can be changed after initialization (i.e. in per-page scripts after load). Almost all will require you to refresh the control.

  • Data limiting:
    • minDays & maxDays & afterToday
    • minYear & maxYear
    • blackDays & blackDates
    • calWeekMode & calWeekModeFirstDay
    • minuteStep
  • Display / Internationalization:
    • calStartDay
    • daysOfWeek, daysOfWeekShort, monthsOfYear, monthsOfYearShort, headerFormat
    • dateFormat (probably - it will throw off reopens though)
    • Dialog mode forcing (either on or off)
  • Any of the calendar or slide mode themes (except the base theme) & disabledDayColor & calWeekModeHighLight
  • closeCallback, openCallback
  • These require throwing the 'refresh' trigger method, or refresh() function:
    • Any of the labels on buttons / window titles.
    • Any of the themes on the datebox or time modes.
    • Any of the options related to inline display
    • timeFormat, fieldsOrder

The following options happen to early, and cannot be changed post-initialization by script events.

  • useInline, useInlineBlind, hideInput
  • useButton, useModal, zindex, useAnimation, useNewStyle, useAltIcon, overrideStyleClass
Something went wrong with that request. Please try again.