Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A multi-mode date and time picker for jQueryMobile - Support @ http://dev.jtsage.com/forums/
JavaScript Perl Python

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
build
css
demos
external
js
screens
tests
LICENSE
README.md
index.html

README.md

jQuery-Mobile-DateBox

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

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

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
  • Supports data-limiting of input:

    • Configurable maximum and minimum years (android mode)
    • Configurable maximum and minimum number of days from "today" (both date modes)
    • Allows blacklisting of days of the week or specific dates (calendar mode)
    • Allows selecting specific day from any week selection (calendar mode)
  • Automatically parses hand-entered or pre-entered dates on open

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

Suggested Use

// BEFORE loading jQM
$( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = 'text';
});

No Option Overrides:

<input type="date" data-role="datebox" name="somedate" />

With Option Overrides:

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

Global Option Overrides:

// AFTER loading jQM
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'dateFormat': 'dd.mm.yyyy',
    'headerFormat': 'dd.mm.yyyy'
});

Available Options

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

Runtime Operation (Scripting / Extending)

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

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 of slide mode themes (except the base theme) & disabledDayColor & calWeekModeHighLight
  • closeCallback

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

  • Operation mode
  • 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
  • noButtonFocusMode, useModal, zindex, noAnimation, timeFormat, fieldsOrder
Something went wrong with that request. Please try again.