Merge branch 'pr/128'

Author: longbill

daterangepicker.css

@@ -88,7 +88,7 @@
 	line-height:1;
 	font-size:12px;
 	margin-bottom:1px;
-	color:#999;
+	color: #ccc;
 	cursor:default;
 }
 .date-picker-wrapper .month-wrapper table div.day.lastMonth,

demo.js

@@ -276,7 +276,7 @@ $(function()
 		showShortcuts: false
 	});
 
-  $('#date-range14-2').dateRangePicker(
+	$('#date-range14-2').dateRangePicker(
 	{
 		batchMode: 'week-range',
 		showShortcuts: false
@@ -386,6 +386,12 @@ $(function()
 		showTopbar: false
 	});
 
+	$('#date-range5-2').dateRangePicker(
+	{
+		minDays:3,
+		maxDays:7
+	});
+
 	$('#date-range24').dateRangePicker(
 	{
 		showWeekNumbers: true
@@ -418,5 +424,18 @@ $(function()
 		selectBackward: true
 	});
 
+	$('#hotel-booking').dateRangePicker(
+	{
+		startDate: new Date(),
+		selectForward: true,
+		beforeShowDay: function(t)
+		{
+			var valid = !(t.getDay() == 0 || t.getDay() == 6);  //disable saturday and sunday
+			var _class = '';
+			var _tooltip = valid ? '' : 'sold out';
+			return [valid,_class,_tooltip];
+		}
+	});
+
 
 });

index.html

@@ -130,6 +130,16 @@ <h2>Demonstrations</h2>
 }				</pre>
 			</div>
 
+			<div class="demo">
+				Limit date range selected between 3 days to 7 days: <input id="date-range5-2" size="40" value="">
+				<a href="#" class="show-option">Show Config</a>
+				<pre class="options">
+{
+	maxDays: 7,
+	minDays: 3
+}				</pre>
+			</div>
+
 			<div class="demo">
 				Select a date range between 2013-01-10 to 2013-02-10: <input id="date-range6" size="40" value="">
 				<a href="#" class="show-option">Show Config</a>
@@ -550,6 +560,30 @@ <h2>Demonstrations</h2>
 }</pre>
 			</div>
 
+			<div class="demo">
+				Typical usage, hotel booking: <input id="hotel-booking" size="60" value="">
+				<a href="#" class="show-option">Show Config</a>
+				<pre class="options">
+{
+	startDate: new Date(),
+	selectForward: true,
+	showDateFilter: function(time, date)
+	{
+		return '&lt;div style="padding:0 5px;">\
+					&lt;span style="font-weight:bold">'+date+'&lt;/span>\
+					&lt;div style="opacity:0.3;">$'+Math.round(Math.random()*999)+'&lt;/div>\
+				&lt;/div>';
+	},
+	beforeShowDay: function(t)
+	{
+		var valid = !(t.getDay() == 0 || t.getDay() == 6);  //disable saturday and sunday
+		var _class = '';
+		var _tooltip = valid ? '' : 'sold out';
+		return [valid,_class,_tooltip];
+	}
+}				</pre>
+			</div>
+
 
 			<h2>Configuration</h2>
 			<pre><b>Usage:</b> $('#dom-id').dateRangePicker(configObject);</pre>