Permalink
Browse files

Update demos with "flipbox" and "timeflipbox", a few extra test cases…

…, add a screenshot of flipbox
  • Loading branch information...
jtsage committed Jul 9, 2011
1 parent 6960817 commit b9476f43d8494b2ad5f4c4db3b9ea560ec9014dd
View
161 README.md
@@ -12,6 +12,7 @@ DateBox Features
* 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
@@ -63,166 +64,12 @@ Suggested Use
Available Options
-----------------
-These can be passed to datebox via an object set at the data-options attribute, or in the standard method.
-
-* _(operation mode)_ __option__ : Description _(default value)_
-
-### Themeing:
-* _(all)_ __theme__ : Theme for original input element. _(c)_
-* _(all)_ __pickPageTheme__ : Theme for popup window or dialog. _(b)_
-* _(all)_ __pickPageButtonTheme__ : Widget buttons. _(a)_
-* _(all)_ __zindex__ : Z-Index for popup window. _(500)_
-* _(all)_ __noAnimation__ : Disable popup window animations. _(false)_
-* _(all)_ __centerWindow__ : Center the popup window in the viewport, rather than over the input element. _(false)_
-* _(android)_ __pickPageInputTheme__ : Month/Date/Year Input Elements. _(e)_
-* _(slide)_ __pickPageSlideButtonTheme__ : Non-centered slide buttons. _(d)_
-* _(cal/slide)_ __pickPageHighButtonTheme__ : "Selected" Day highlighting. _(e)_
-* _(calendar)_ __pickPageTodayButtonTheme__ : "Today" Day highlighting. _(e)_
-* _(calendar)_ __pickPageOHighButtonTheme__ : highDates Date highlighting. _(e)_
-* _(calendar)_ __pickPageODHighButtonTheme__ : highDays Date highlighting. _(e)_
-* _(calendar)_ __calWeekModeHighlight__ : Toggle all buttons on week mode. _(true)_
-* _(calendar)_ __disabledDayColor__ : Text color for disabled days with date limiting. _(#888)_
-* _(calendar)_ __calHighToday__ : Boolean, use theme highlight for calendar "today". _(true)_
-* _(calendar)_ __calHighPicked__ : Boolean, use theme highlight for calendar "picked date". _(true)_
-
-### Date Formats and Text Internationalization
-* _(android)_ __daysOfWeek__ : An array of the days of the week. _(['Sunday', 'Monday', ... 'Saturday'])_
-* _(android)_ __fieldsOrder__ : Define the order of the fields. _(['m', 'd', 'y'])_
-* _(cal/slide)_ __daysOfWeekShort__ : An Array of abreviations for days of the week. _(['Su', 'Mo', ... 'Sa'])_
-* _(slide)_ __monthsOfYearShort__ : An Array of abbreviations for the months. _(['Jan', 'Feb', ... 'Dec'])_
-* _(duration)_ __durationOrder__ : Define the order of the fields. _(['d', 'h', 'i', 's'])_
-* _(duration)_ __durationLabel__ : An Array of the parts of the duration. _('Days', 'Hours', 'Minutes', 'Seconds')_
-* _(duration)_ __durationDays__ : An Array of the singular and plural name for days. _('Day', 'Days')_
-* _(duration)_ __durationShort__ : Use the shortest mode possible to display duration. _(true)_
-* _(duration)_ __durationNoDays__ : Do not break off days from duration, only h:i:s. _(false)_
-* _(duration)_ __durationSteppers__ : An object of the amount to step each part of the duration. _({'d':1, 'h':1, 'i':1, 's':1})_
-* _(all date)_ __monthsOfYear__ : An Array of months of the year. _(['January', 'February', ... 'December'])_
-* _(all date)_ __headerFormat__ : Return header format. _(ddd, mmm dd, YYYY)_
- * __YYYY__ : 4 Digit Year
- * __MM__ : 2 Digit Month (zero pad)
- * __mm__ : 1 or 2 Digit Month
- * __mmm__ : Text Month
- * __DD__ : 2 Digit Day (zero pad)
- * __dd__ : 1 or 2 Digit Day
- * __ddd__ : Day of week
- * __SS__ : Ordinal Suffix (4th, 3rd, 1st, etc)
- * **NOTE** experimentalReg must be enabled for ordinals.
-* _(both date)_ __dateFormat__ : Return date format. _(YYYY-MM-DD)_
- * __YYYY__ : 4 Digit Year
- * __MM__ : 2 Digit Month (zero pad)
- * __mm__ : 1 or 2 Digit Month
- * __mmm__ : Text Month
- * __DD__ : 2 Digit Day (zero pad)
- * __dd__ : 1 or 2 Digit Day
- * __ddd__ : Day of week
- * __SS__ : Ordinal Suffix (4th, 3rd, 1st, etc)
- * **NOTE** experimentalReg must be enabled for ordinals.
-* _(time)_ __timeFormat__ : Either '12' or '24' - The clock mode, 12hr or 24hr. _(24)_
-* _(time)_ __meridiemLetters__ : Meridiem notation _(['AM', 'PM'])_
-
-### Data Limits:
-* _(all date)_ __defaultDate__ : Default date when nothing entered into input box, array of [y,m,d] prefered, ISO accepted. _(null)_
- * **NOTE** ISO date is parsed due to iPad/iPhone limitation, it is (slightly) slower than the array method.
-* _(all date)_ __afterToday__ : Limit date to "today" or after. _(false)_
-* _(all date)_ __beforeToday__ : Limit date to "today" or before. _(false)_
-* _(calendar)_ __notToday__ : Limit date to NOT "today". _(false)_
-* _(all date)_ __maxDays__ : Set the upper limit to this # of days after today. _(false)_
-* _(all date)_ __minDays__ : Set the lower limit to this # of days before today. _(false)_
-* _(android)_ __maxYear__ : Maximum year allowed in controls (non-constrained in text box). _(false)_
-* _(android)_ __minYear__ : Minimum year allowed in controls (non-constrained in text box). _(false)_
-* _(calendar)_ __calWeekMode__ : Boolean, week mode on or off (choose only a specific DAY). _(false)_
-* _(calendar)_ __calWeekModeFirstDay__ : Day of week to choose with week mode (numeric, 0-6, relative to calendar display). _(1)_
-* _(calendar)_ __calStartDay__ : Day of week to start calendar on (numeric - 0=Sun, 1=Mon,... 6=Sat). _(0)_
-* _(calendar)_ __blackDays__ : An array of days of the week to blacklist. _(false)_
- * ___example___ : [0,2] : Blacklist sunday and tuesday.
-* _(calendar)_ __blackDates__ : A simple array of individual dates to blacklist. _(false)_
- * ___example___ : [ '2010-12-24', '2010-12-25' ] : Blacklist December 24th & 25th, 2010.
-* _(calendar)_ __highDays__ : An array of days of the week to highlight. _(false)_
- * ___example___ : [0,2] : Highlight sunday and tuesday.
-* _(calendar)_ __highDates__ : A simple array of individual dates to highlight with pickPageOHighTheme. _(false)_
- * ___example___ : [ '2010-12-24', '2010-12-25' ] : Blacklist December 24th & 25th, 2010.
-* _(time)_ __minuteStep__ : Number of minutes to step per button press in timebox mode. _(1)_
-
-### User Interface:
-* __mode__ : Mode of operation. _(datebox)_
- * __datebox__ : Android Style Datepicker
- * __calbox__ : Calendar Datepicker
- * __timebox__ : Android Style Time Picker
- * __slidebox__ : Slide Style Datepicker
- * __durationbox__: Duration Style Time Picker
-* _(all date)_ __experimentalReg__ : Use the new experimantal regex input parser. Please test! _(false)_
-* _(all)_ __useDialogForceTrue__ : Boolean *Always* use Dialog Window, regardless of screen size. _(false)_
-* _(all)_ __useDialogForceFalse__ : Boolean *Never* use Dialog Window, regardless of screen size. _(false)_
-* _(all)_ __useModal__ : Use modal styling (background fades out) on popup. _(false)_
-* _(all)_ __noButtonFocusMode__ : Suppress button, open on element focus instead. _(false)_
-* _(all)_ __noButton__ : Suppress button. _(false)_
-* _(all)_ __noSetButton__ : Do not show the set button. Probably only useful for inline mode. _(false)_
-* _(all)_ __useInline__ : Show datebox inline on page, no dialog or popup. _(false)_
-* _(all)_ __useInlineHideInput__ : When using inline mode, do not show the input box. _(false)_
-* _(all)_ __titleDialogLabel__: Dialog label override. _(false)_
-* _(all)_ __closeCallback__ : A function to run on DateBox close. _(false)_
-* _(all)_ __swipeEnabled__ : Swipe gestures active (only cal / slide for now). _(true)_
-* _(android)_ __setDateButtonLabel__ : The label displayed in the set date button. _(Set Date)_
-* _(calendar)_ __calShowDays__ : Boolean show day names in grid. _(true)_
-* _(calendar)_ __calShowOnlyMonth__ : show *only* this month, do not fill in empty boxes. _(false)_
-* _(duration)_ __setDurationButtonLabel__ : The label displayed in the set duration button. _(Set Duration)_
-* _(all date)_ __titleDateDialogLabel__: Dialog label for date mode. _(Set Date)_
-* _(time)_ __setTimeButtonLabel__ : The label displayed in the set time button. _(Set Time)_
-* _(time)_ __titleTimeDialogLabel__: Dialog label for time mode. _(Set Time)_
-
-To disable the element, use the standard disabled='disabled' in your markup.
-
-**Value Notes (durationbox) - Supported initial strings**:
-
-* _seconds_ : 140
-* _minutes:seconds_ : 121:10
-* _hours:minutes:seconds_ : 34:12:10
-* _days string, hours:minutes:seconds_ : 3 ignored, 03:12:10
-
+Please see the full api documantation at: [dev.jtsage.com](http://dev.jtsage.com/jQM-DateBox/demos/api/matrix.html)
+
Runtime Operation (Scripting / Extending)
-----------------------------------------
-### Public Member Functions
-
-The plugin supports a number of public functions:
-
-* $('element').datebox('open'); _// Open the DateBox control_
-
-* $('element').datebox('close'); _// Close the DateBox control_
-
-* $('element').datebox('disable'); _// Disable the DateBox control_
-
-* $('element').datebox('enable'); _// Enable the DateBox control_
-
-* $('element').datebox('refresh'); _// Force the DateBox control to refresh it's display (see below)_
-
-### Callback events
-
-jQM-Datebox supports a number of jQuery events. They all are triggered on:
-
- $('element').bind('datebox', function (e, passed) { ... });
-
-Where passed is an object conatining:
-
-* __method__ : Method triggered:
- * __refresh__ : Triggerd on HTML / data refresh (very frequent)
- * __open__ : Triggerd on DateBox open
- * __close__ : Triggered on DateBox close
- * __enable__ : Triggered on DateBox enable
- * __disable__ : Triggered on DateBox disable
- * __set__ : Triggered on setting a date (followed by close)
- * __offset__ : Triggered on internal date change with:
-
-* __amount__ : _(offset method)_ Amount to add to value (can be negative)
-* __type__ : _(offset method)_ Value updated:
- * __y__ : Year
- * __m__ : Month
- * __d__ : Date
- * __h__ : Hour
- * __i__ : Minute
- * __s__ : Second
- * __a__ : Meridian
-
+Please see the full api documantation at: [dev.jtsage.com](http://dev.jtsage.com/jQM-DateBox/demos/api/events.html)
### Just-In-Time options updating
View
@@ -19,11 +19,6 @@
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
- <script type="text/javascript">
- jQuery.extend(jQuery.mobile.datebox.prototype.options, {
- 'experimentalReg': true
- });
- </script>
<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
<script type="text/javascript">
@@ -43,16 +38,17 @@ <h1>jQueryMobile - DateBox</h1>
<h2>Available Options</h2>
<ul data-role="listview" data-inset="true">
- <li><h3>mode</h3><p><strong>Purpose:</strong>Mode of operation<br /><strong>Default:</strong> 'datebox'<br /><strong>Options:</strong> 'datebox', 'slidebox', 'calbox', 'timebox', 'durationbox'</p></li>
+ <li><h3>mode</h3><p><strong>Purpose:</strong>Mode of operation<br /><strong>Default:</strong> 'datebox'<br /><strong>Options:</strong> 'datebox', 'slidebox', 'calbox', 'timebox', 'durationbox', 'flipbox', 'timeflipbox'</p></li>
<li><h3>Themeing</h3><ul data-inset="true">
<li data-role="list-divider">Named Themes</li>
<li><h3>theme</h3><p><strong>Purpose:</strong>Theme for original input elemet<br /><strong>Default:</strong> 'c'<br /><strong>Modes:</strong> all</p></li>
<li><h3>pickPageTheme</h3><p><strong>Purpose:</strong>Theme for popup window or dialog<br /><strong>Default:</strong> 'b'<br /><strong>Modes:</strong> all</p></li>
<li><h3>pickPageButtonTheme</h3><p><strong>Purpose:</strong>Theme for widget buttons<br /><strong>Default:</strong> 'a'<br /><strong>Modes:</strong> all</p></li>
<li><h3>pickPageInputTheme</h3><p><strong>Purpose:</strong>Theme for widget input elemets<br /><strong>Default:</strong> 'e'<br /><strong>Modes:</strong> android, duration, time</p></li>
<li><h3>pickPageSlideButtonTheme</h3><p><strong>Purpose:</strong>Theme for non-centered slide buttons<br /><strong>Default:</strong> 'd'<br /><strong>Modes:</strong> slide</p></li>
+ <li><h3>pickPageFlipButtonTheme</h3><p><strong>Purpose:</strong>Theme for non-centered flip buttons<br /><strong>Default:</strong> 'd'<br /><strong>Modes:</strong> flip</p></li>
<li><h3>pickPageHighButtonTheme</h3><p><strong>Purpose:</strong>Theme for currently selected date button<br /><strong>Default:</strong> 'e'<br /><strong>Modes:</strong> calendar</p></li>
- <li><h3>pickPageTodayButtonTheme</h3><p><strong>Purpose:</strong>Theme for current date's button<br /><strong>Default:</strong> 'e'<br /><strong>Modes:</strong> calendar</p></li>
+ <li><h3>pickPageTodayButtonTheme</h3><p><strong>Purpose:</strong>Theme for current date's button<br /><strong>Default:</strong> 'e'<br /><strong>Modes:</strong> calendar, flip, slide</p></li>
<li><h3>pickPageOHighButtonTheme</h3><p><strong>Purpose:</strong>Theme for highlighted buttons (highDates)<br /><strong>Default:</strong> 'e'<br /><strong>Modes:</strong> calendar</p></li>
<li><h3>pickPageODHighButtonTheme</h3><p><strong>Purpose:</strong>Theme for highlighted buttons (highDays)<br /><strong>Default:</strong> 'e'<br /><strong>Modes:</strong> calendar</p></li>
<li data-role="list-divider">Boolean Display Options</li>
@@ -67,7 +63,7 @@ <h2>Available Options</h2>
</ul></li>
<li><h3>Date Formats</h3><ul data-inset="true">
<li data-role="list-divider">Output Format</li>
- <li><h3>dateFormat</h3><p><strong>Purpose:</strong>Format the returned date<br /><strong>Default:</strong> 'YYYY-MM-DD' for dates, 'GG:ii AA' or 'HH:ii' for time<br /><strong>Modes:</strong> all
+ <li><h3>dateFormat</h3><p><strong>Purpose:</strong>Format the returned date<br /><strong>Default:</strong> 'YYYY-MM-DD' for dates<br /><strong>Modes:</strong> all date
<pre><code> YYYY: 4 Digit Year
MM : 2 Digit Month (zero pad)
mm : 1 or 2 Digit Month
@@ -100,6 +96,23 @@ <h2>Available Options</h2>
ii : 2 Digit Minutes (zero pad)
ss : 2 Digit Seconds (zero pad)
aa : Lower case meridiem letters
+ AA : Upper case meridiem letters</code></pre></p></li>
+ <li><h3>timeOutput</h3><p><strong>Purpose:</strong>Format the returned time<br /><strong>Default:</strong> 'GG:ii AA' or 'HH:ii' dependant on timeFormat<br /><strong>Modes:</strong> timebox, timeflipbox
+ <pre><code> YYYY: 4 Digit Year
+ MM : 2 Digit Month (zero pad)
+ mm : 1 or 2 Digit Month
+ mmm : Text Month
+ DD : 2 Digit Day (zero pad)
+ dd : 1 or 2 Digit Day
+ ddd : Day of week
+ SS : Ordinal Suffix (4th, 3rd, 1st, etc)
+ HH : 2 Digit Hour, 24 Hour Clock (zero pad)
+ hh : 1 or 2 Digit Hour, 24 Hour Clock
+ GG : 2 Digit Hour, 12 Hour Clock (zero pad)
+ gg : 1 or 2 Digit Hour, 12 Hour Clock
+ ii : 2 Digit Minutes (zero pad)
+ ss : 2 Digit Seconds (zero pad)
+ aa : Lower case meridiem letters
AA : Upper case meridiem letters</code></pre></p></li>
<li><h3>durationShort</h3><p><strong>Purpose:</strong>Use the shortest mode possible to display duration<br /><strong>Default:</strong> true<br /><strong>Modes:</strong> duration</p></li>
<li><h3>durationNoDays</h3><p><strong>Purpose:</strong>Do not break off days from duration, only h:i:s<br /><strong>Default:</strong> false<br /><strong>Modes:</strong> duration</p></li>
View
@@ -19,11 +19,6 @@
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
- <script type="text/javascript">
- jQuery.extend(jQuery.mobile.datebox.prototype.options, {
- 'experimentalReg': true
- });
- </script>
<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
<script type="text/javascript">
@@ -44,6 +39,7 @@ <h1>jQueryMobile - DateBox</h1>
<h3>Visual Theme Placement</h3>
<img src="/jQM-DateBox/demos/theme-android.png" /><br />
<img src="/jQM-DateBox/demos/theme-slide.png" /><br />
+ <img src="/jQM-DateBox/demos/theme-flipbox.png" /><br />
<img src="/jQM-DateBox/demos/theme-calendar.png" />
</div>
<div class="content-primary">
@@ -62,6 +58,8 @@ <h2>Theming</h2>
<dd>Buttons (other than the set button) in the popup / dialog</dd>
<dt>pickPageSlideButtonTheme</dt>
<dd>Non-selected buttons in slide mode</dd>
+ <dt>pickPageFlipButtonTheme</dt>
+ <dd>Non-selected buttons in flip mode</dd>
<dt>pickPageTodayButtonTheme</dt>
<dd>Today's date button in calendar mode</dd>
<dt>pickPageHighButtonTheme</dt>
Oops, something went wrong.

0 comments on commit b9476f4

Please sign in to comment.