Permalink
Browse files

New Feature - Clear button (useClearButton and collapseButtons) See: h…

  • Loading branch information...
1 parent 1a70ad0 commit a6331aa2d5496b1a564cb132d203818a4cff74be @jtsage committed Feb 18, 2012
Showing with 121 additions and 12 deletions.
  1. +1 −1 css/jquery.mobile.datebox.css
  2. +2 −1 demos/extras.js
  3. +81 −0 demos/opt/clear.html
  4. +1 −0 index.html
  5. +31 −7 js/jquery.mobile.datebox.js
  6. +5 −3 tests/dev.html
@@ -11,7 +11,6 @@
.ui-input-datebox { min-height: 38px; } /* Fix for IE8 */
.ui-input-datebox .ui-btn-icon-notext { margin-top: 5px !important; margin-bottom: 5px !important; }
.ui-input-datebox input { width: 100% !important; padding: 0 !important; margin-top: 5px !important; margin-right: -40px !important; border: 1px solid transparent !important; vertical-align: middle; display: inline-block !important; background-color: transparent; zoom: 1; *display: inline; }
-.ui-input-datebox input.clearbtn { margin-right: -80px !important; }
.ui-input-datebox input:focus { outline: none;}
.ui-input-datebox .ui-btn-text {display: none;}
@@ -75,6 +74,7 @@
.ui-datebox-screen-modal { background-color: black; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }
.ui-datebox-hidden { display: none; }
.ui-dialog .ui-datebox-container { border: none !important; }
+.ui-datebox-collapse a { display: inline-block; width: 45% }
.ui-datebox-inline { margin-top: 5px; border: 5px solid #111111 !important; margin-left: auto; margin-right: auto; text-align: center; }
.ui-datebox-inlineblind { margin-top: 5px; border: 5px solid #111111 !important; margin-left: auto; margin-right: auto; text-align: center; }
View
@@ -23,7 +23,8 @@ $(":jqmData(role)=page").live('pageinit', function(e) {
'<li><a href="simplelimit.html">Simple Data Limits</a></li>' +
'<li><a href="advlimit.html">Advanced Data Limits</a></li>' +
'<li><a href="dialog.html">Display (window) Modes</a></li>' +
- '<li><a href="open.html">Open Methods</a></li>'),
+ '<li><a href="open.html">Open Methods</a></li>'+
+ '<li><a href="clear.html">Clearing the Date</a></li>'),
'script': $('<li data-role="list-divider">Interaction Demos</li>' +
'<li><a href="link.html">Linked Input Elements</a></li>' +
'<li><a href="linkdur.html">Linked Dates w/ a Duration</a></li>' +
View
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQueryMobile - DateBox Demos</title>
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
+ <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" />
+
+ <!-- NOTE: Script load order is significant! -->
+
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.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" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/demos/extras.js"></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">
+ $('div').live('pagecreate', function() {
+ prettyPrint()
+ });
+ </script>
+
+</head>
+<body>
+<div data-role="page" data-theme="c" id="oddOpen">
+ <div data-role="header">
+ <h1>jQueryMobile - DateBox</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext">Home</a>
+ </div>
+ <div data-role="content" data-theme="c">
+ <div class="content-secondary">
+
+ <div id="jqm-homeheader">
+ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework :: DateBox" /></h1>
+ <p>A Date and Time Picker plugin for jQueryMobile</p>
+
+ </div>
+
+ <div class="optdemos sidebar"></div>
+
+ </div><!--/content-primary-->
+
+ <div class="content-primary">
+ <h2>Adding a Clear Button</h2>
+
+ <div data-role="fieldcontain">
+ <label for="clearbtn">Some Date</label><input name="clearbtn" type="date" data-role="datebox" id="clearbtn" data-options='{"useClearButton": true}' />
+ </div>
+
+ <p>If you restict manual editing of the date input, you may wish to provide a clear button. To do so, set 'useClearButton' to TRUE.</p>
+
+ <pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
+
+&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
+ data-options='{"useClearButton": true}'&gt;</pre>
+
+ <h2>Collapsing the Buttons</h2>
+
+ <div data-role="fieldcontain">
+ <label for="clearbtn2">Some Date</label><input name="clearbtn2" type="date" data-role="datebox" id="clearbtn2" data-options='{"useClearButton": true, "collapseButtons": true}' />
+ </div>
+
+ <p>Alternativly, you may wish to display both the "Set" and "Clear" buttons on the same line. Set 'useClearButton' and 'collapseButtons' to TRUE.</p>
+
+ <pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
+
+&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
+ data-options='{"useClearButton": true, "collapseButtons": true}'&gt;</pre>
+
+ </div>
+
+ </div>
+ <div data-role="footer">
+ </div>
+</div>
+</html>
View
@@ -67,6 +67,7 @@ <h1 id="jqm-logo"><img src="demos/jquery-logo-db.png" alt="jQuery Mobile Framewo
<li><a href="demos/opt/advlimit.html">Advanced Data Limits</a></li>
<li><a href="demos/opt/dialog.html">Display (window) Modes</a></li>
<li><a href="demos/opt/open.html">Open Methods</a></li>
+ <li><a href="demos/opt/clear.html">Clearing the Date</a></li>
<li data-role="list-divider">Interaction Demos</li>
<li><a href="demos/script/link.html">Linked Input Elements</a></li>
@@ -59,6 +59,8 @@
useModal: false,
useInline: false,
useInlineBlind: false,
+ useClearButton: false,
+ collapseButtons: false,
noButtonFocusMode: false,
focusMode: false,
noButton: false,
@@ -124,7 +126,8 @@
slideFieldOrder: ['y', 'm', 'd'],
dateFormat: '%Y-%m-%d',
useArabicIndic: false,
- isRTL: false
+ isRTL: false,
+ clearButton: 'Clear'
}
}
},
@@ -1155,7 +1158,7 @@
/* BEGIN:CALBOX */
if ( o.mode === 'calbox' ) { // Meat and potatos - make the calendar grid.
self.controlsInput.empty().html( o.lang[o.useLang].monthsOfYear[self.theDate.getMonth()] + " " + self.theDate.getFullYear() );
- self.controlsSet.empty();
+ self.controlsPlus.empty();
calmode = {'today': -1, 'highlightDay': -1, 'presetDay': -1, 'nexttoday': 1,
'thisDate': new Date(), 'maxDate': new Date(), 'minDate': new Date(),
@@ -1316,9 +1319,9 @@
}
}
}
- thisRow.appendTo(self.controlsSet);
+ thisRow.appendTo(self.controlsPlus);
}
- self.controlsSet.delegate('div.ui-datebox-griddate', o.clickEvent + ' vmouseover vmouseout', function(e) {
+ self.controlsPlus.delegate('div.ui-datebox-griddate', o.clickEvent + ' vmouseover vmouseout', function(e) {
if ( e.type === o.clickEvent ) {
e.preventDefault();
if ( $(this).jqmData('enabled') ) {
@@ -1648,6 +1651,7 @@
self.calNoNext = false;
self.calNoPrev = false;
self.setButton = false;
+ self.clearButton = false;
if ( o.fieldsOrderOverride === false ) {
switch (o.mode) {
@@ -1984,7 +1988,8 @@
/* BEGIN:CALBOX */
if ( o.mode === 'calbox' ) {
controlsHeader = $("<div>", {"class": 'ui-datebox-gridheader'}).appendTo(self.pickerContent);
- controlsSet = $("<div>", {"class": 'ui-datebox-grid'}).appendTo(self.pickerContent);
+ controlsPlus = $("<div>", {"class": 'ui-datebox-grid'}).appendTo(self.pickerContent);
+ controlsSet = templControls.clone().appendTo(self.pickerContent);
controlsInput = $("<div class='ui-datebox-gridlabel'><h4>Uninitialized</h4></div>").appendTo(controlsHeader).find('h4');
if ( o.swipeEnabled ) { // Calendar swipe left and right
@@ -2029,7 +2034,7 @@
if ( o.calTodayButton === true ) { // Show today button at bottom
self.setButton = $("<a href='#'>PlaceHolder</a>")
- .appendTo(self.pickerContent).buttonMarkup({theme: o.pickPageTheme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
+ .appendTo(controlsSet).buttonMarkup({theme: o.pickPageTheme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
.bind(o.clickEvent, function(e) {
e.preventDefault();
self.theDate = new Date();
@@ -2040,12 +2045,26 @@
$.extend(self, {
controlsInput: controlsInput,
- controlsSet: controlsSet
+ controlsPlus: controlsPlus
});
self.pickerContent.appendTo(self.thisPage);
}
/* END:CALBOX */
+
+ if ( o.useClearButton === true ) { // Clear button at very bottom
+ self.clearButton = $("<a href='#'>PlaceHolder</a>")
+ .appendTo(controlsSet).buttonMarkup({theme: o.pickPageTheme, icon: 'delete', iconpos: 'left', corners:true, shadow:true})
+ .bind(o.clickEvent, function(e) {
+ e.preventDefault();
+ self.input.val('');
+ self.input.trigger('datebox', {'method':'close'});
+ });
+ }
+ if ( o.collapseButtons && ( self.clearButton !== false && self.setButton !== false ) ) {
+ controlsSet.addClass('ui-datebox-collapse');
+ }
+
},
_buttonsTitle: function () {
var self = this,
@@ -2072,6 +2091,11 @@
self.pickPageTitle.html(o.titleDialogLabel);
}
+ // FIX THE CLEAR BUTTON
+ if ( self.clearButton !== false ) {
+ self.clearButton.find('.ui-btn-text').html(o.lang[o.useLang].clearButton);
+ }
+
// FIX THE SET BUTTON
if ( self.setButton !== false ) {
switch (o.mode) {
View
@@ -16,13 +16,15 @@
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.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.js"></script>
- <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
+ <!--script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script-->
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
useModal: false,
fullScreen: true,
- focusMode: true,
+ useClearButton: true,
+ collapseButtons: true,
+ //noButtonFocusMode: true,
//centerWindow: true,
//focusMode: true,
//afterToday: true,
@@ -51,7 +53,7 @@
<div data-role="fieldcontain">
<label for="lang2">datebox</label>
- <input name="lang2" type="text" data-role="datebox" data-options='{"mode": "datebox"}' id="lang2" />
+ <input name="lang2" type="text" data-role="datebox" data-options='{"mode": "datebox", "noButtonFocusMode":false}' id="lang2" />
</div>
<div data-role="fieldcontain">
<label for="lang3">flipbox</label>

0 comments on commit a6331aa

Please sign in to comment.