Add date and day blacklisting

jtsage · May 28, 2011 · 91599e5 · 91599e5
1 parent d77254a
commit 91599e5
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -89,9 +89,11 @@ _These can be passed to datebox via an object set at the data-options attribute,
 * __defaultDate__ : Default date when nothing entered into input box
 * __maxYear__ : Maximum year allowed in controls (non-constrained in text box)
 * __minYear__ : Minimum year allowed in controls (non-constrained in text box)
-* __afterToday__ : Limit date to "today" or after (android)
-* __maxDays__ : Set the upper limit to this # of days after today (android)
-* __minDays__ : Set the lower limit to this # of days before today (android)
+* __afterToday__ : Limit date to "today" or after
+* __maxDays__ : Set the upper limit to this # of days after today
+* __minDays__ : Set the lower limit to this # of days before today
+* __blackDays__ : An array of days of the week to blacklist (numeric) (calendar only)
+* __blackDates__ : A complex object of individual dates to blacklist (calendar only, see demos)
 * __minuteStep__ : Number of minutes to step per button press in timebox mode. (default 1)
 * __calShowDays__ : Calendar mode - Boolean show day names in grid
 * __calShowOnlyMonth__ : Calendar mode - show *only* this month, do not fill in empty boxes (default: false)

diff --git a/index.php b/index.php
@@ -224,6 +224,18 @@ function updateEndDate() { // UPDATE END DATE FIELD
 					<input name="inline" type="date" data-role="datebox" data-options='{"useInline": true, "useInlineHideInput": true, "mode": "calbox"}' id="inline" />
 				</div>
 			</div>
+
+			<div data-role="collapsible" data-collapsed="true">
+				<h3>Blacklisted Days and Dates</h3>
+				<p>Blacklist days (day of week), or dates (yyyy/mm/dd) - Calendar mode only</p>
+				<p>Date Format:  { 'y2001': { 'm5' : [ 1, 2, 3 ] } } :: This will black-out the 1st, 2nd, and 3rd of the 5th Month (May) of 2001</p>
+				<p>Example shows No Tuesdays or Fridays, and some ART!</p>
+
+				<div data-role="fieldcontain">
+					<label for="blacklist">Some Date</label>
+					<input value="2011-05-01" name="blacklist" type="date" data-role="datebox" id="blacklist" data-options='{"mode": "calbox", "blackDays": [2,5], "blackDates": {"y2011": {"m5": [2,4,22,29,30,5,7]}}}'/>
+				</div>
+			</div>
 
 		</div>
 		<div data-role="collapsible">

diff --git a/jquery.mobile.datebox.js b/jquery.mobile.datebox.js
@@ -48,6 +48,8 @@
 		afterToday: false,
 		maxDays: false,
 		minDays: false,
+		blackDays: false,
+		blackDates: false,
 		disabledDayColor: '#888',
 	},
 	_dstAdjust: function(date) {
@@ -263,10 +265,21 @@
 				maxDate = new Date(),
 				minDate = new Date(),
 				skipPrev = false,
-				skipNext = false;
+				skipNext = false,
+				curBlackYear = false,
+				curBlackMonth = false;
 
 			if ( thisDate.getMonth() === self.theDate.getMonth() && thisDate.getFullYear() === self.theDate.getFullYear() ) { currentMonth = true; highlightDay = thisDate.getDate(); } 
 			if ( presetDate.getMonth() === self.theDate.getMonth() && presetDate.getFullYear() === self.theDate.getFullYear() ) { presetDay = presetDate.getDate(); } 
+
+			if ( o.blackDates !== false ) { // DATES Blacklist
+				if ( ! ( o.blackDates['y'+self.theDate.getFullYear()] == undefined ) ) {
+					curBlackYear = o.blackDates['y'+self.theDate.getFullYear()];
+					if ( ! ( curBlackYear['m'+(self.theDate.getMonth()+1)] == undefined ) ) {
+						curBlackMonth = curBlackYear['m'+(self.theDate.getMonth()+1)];
+					}
+				}
+			}
 
 			self.calNoPrev = false;
 			self.calNoNext = false;
@@ -336,7 +349,7 @@
 								.addClass('ui-datebox-griddate ui-corner-all')
 								.attr('data-date', today)
 								.appendTo(thisRow);
-							if ( !o.afterToday && !o.maxDays ) {
+							if ( !o.afterToday && !o.maxDays && !o.minDays && !o.blackDates && !o.blackDays ) {
 								boxxy.click(function(e) {
 									e.preventDefault();
 									self.theDate.setDate($(this).attr('data-date'));
@@ -354,26 +367,32 @@
 											skipit = true;
 									}
 								} 
-								if ( o.maxDays !== false ) {
+								if ( !skipit && o.maxDays !== false ) {
 									if (
 										( self.theDate.getFullYear() > maxDate.getFullYear() ) ||
 										( self.theDate.getFullYear() == maxDate.getFullYear() && self.theDate.getMonth() > maxDate.getMonth() ) ||
 										( self.theDate.getFullYear() == maxDate.getFullYear() && self.theDate.getMonth() == maxDate.getMonth() && today > maxDate.getDate() ) ) {
 											skipit = true;
 									}
 								} 
-								if ( o.minDays !== false ) {
+								if ( !skipit && o.minDays !== false ) {
 									if (
 										( self.theDate.getFullYear() < minDate.getFullYear() ) ||
 										( self.theDate.getFullYear() == minDate.getFullYear() && self.theDate.getMonth() < minDate.getMonth() ) ||
 										( self.theDate.getFullYear() == minDate.getFullYear() && self.theDate.getMonth() == minDate.getMonth() && today < minDate.getDate() ) ) {
-
 											skipit = true;
 									}
-								} else if ( o.blackDays !== false ) {
-									// do some stuff //
+								} 
+								if ( !skipit && o.blackDays !== false ) { // Individual DAY Blacklist
+									if ( $.inArray(j, o.blackDays) > -1 ) {
+										skipit = true;
+									}
+								}
+								if ( !skipit && o.blackDates !== false && curBlackMonth != false ) { // DATES Blacklist
+									if ( $.inArray(today, curBlackMonth) > -1 ) {
+										skipit = true;
+									}
 								}
-
 
 								if ( ! ( skipit ) ) {
 									boxxy.click(function(e) {