update datepicker range value if you swap out range presets for some …

…reason

src/strand-datepicker/index.html

@@ -82,7 +82,9 @@ <h5 style="display: inline-block;">Direction</h5>
 				</strand-checkbox>
 
 				<span>&nbsp;</span>
-
+				<strand-button type="secondary" onclick="differentPresets()">
+					<label>Swap Preset Sets</label>
+				</strand-button>
 				<strand-button type="secondary" onclick="resetDatepicker()">
 					<label>Reset</label>
 				</strand-button>
@@ -200,8 +202,22 @@ <h5 style="display: inline-block;">Direction</h5>
 				})
 			});
 
-			// 	init();
-			// });
+			function differentPresets() {
+				window._whichDpPreset = !window._whichDpPreset;
+				if(window._whichDpPreset) {
+					dp.rangePresets = [
+						{name:"Last 2 Days", value:"Last 7 Days", start:moment().subtract(2, 'days'), end:moment()},
+						{name:"Last 3 Days", value:"Last 14 Days", start:moment().subtract(3, 'days'), end:moment()}
+					];
+				} else {
+					dp.rangePresets = [
+						{name:"Last 7 Days", value:"Last 7 Days", start:moment().subtract(7, 'days'), end:moment()},
+						{name:"Last 14 Days", value:"Last 14 Days", start:moment().subtract(14, 'days'), end:moment()},
+						{name:"Last 30 Days", value:"Last 30 Days", start:moment().subtract(30, 'days'), end:moment()},
+						{name:"Month to Date", value:"Month to Date", start:moment().startOf('month'), end:moment()}
+					];
+				}
+			};
 
 			function init() {
 				dpb.addEventListener("mouseup", handleDpb);

src/strand-datepicker/strand-datepicker.js

@@ -275,15 +275,19 @@
 		},
 
 		_rangePresetsChanged: function(newRangePresets, oldRangePresets) {
-			if(newRangePresets) this._rangePresets = newRangePresets.map(function(range, i) {
-				var start = moment(range.start, this.dateFormat, true);
-				var end = moment(range.end, this.dateFormat, true);
-				return {
-					index: i,
-					range: moment.range(start, end),
-					label: range.name
-				};
-			});
+			if(newRangePresets) {
+				this._rangePresets = newRangePresets.map(function(range, i) {
+					var start = moment(range.start, this.dateFormat, true);
+					var end = moment(range.end, this.dateFormat, true);
+					return {
+						index: i,
+						range: moment.range(start, end),
+						label: range.name
+					};
+				});
+
+				if(this._startUnix && this._endUnix) this.rangeValue = this._findRange(this._startUnix, this._endUnix);
+			}
 		},
 
 		// Date bounds
@@ -345,11 +349,11 @@
 
 
 		_startChanged: function() {
-			this.reset();
+			this.debounce('reset', this.reset);
 		},
 
 		_endChanged: function() {
-			this.reset();
+			this.debounce('reset', this.reset);
 		},
 
 		// Footer

test/strand-datepicker.html

@@ -19,12 +19,14 @@
 <strand-button id="target4"><label>Open Datepicker</label></strand-button>
 <strand-button id="target5"><label>Open Datepicker</label></strand-button>
 <strand-button id="target6"><label>Open Datepicker</label></strand-button>
+<strand-button id="target7"><label>Open Datepicker</label></strand-button>
 <strand-datepicker id="test1" target="#target1"></strand-datepicker>
 <strand-datepicker id="test2" target="#target2"></strand-datepicker>
 <strand-datepicker id="test3" target="#target3"></strand-datepicker>
 <strand-datepicker id="test4" target="#target4"></strand-datepicker>
 <strand-datepicker id="test5" target="#target5"></strand-datepicker>
 <strand-datepicker id="test6" target="#target6"></strand-datepicker>
+<strand-datepicker id="test7" target="#target7"></strand-datepicker>
 <script>
 describe("strand-datepicker", function() {
 
@@ -150,6 +152,28 @@
 			done();
 		});
 	});
+
+	it("should update rangeValue if you swap presets for some reason after initialization", function(done) {
+		var t7 = document.querySelector("#test7");
+		var origPresets = [
+			{name:"Last 7 Days", value:"Last 7 Days", start:moment().subtract(7, 'days'), end:moment()},
+			{name:"Last 14 Days", value:"Last 14 Days", start:moment().subtract(14, 'days'), end:moment()},
+			{name:"Last 30 Days", value:"Last 30 Days", start:moment().subtract(30, 'days'), end:moment()},
+			{name:"Month to Date", value:"Month to Date", start:moment().startOf('month'), end:moment()}
+		];
+		t7.rangePresets = origPresets;
+		t7.start = moment().subtract(2,'days');
+		t7.end = moment();
+		var newPresets = [
+			{name:"Last 2 Days", value:"Last 2 Days", start:moment().subtract(2, 'days'), end:moment()},
+			{name:"Last 3 Days", value:"Last 3 Days", start:moment().subtract(3, 'days'), end:moment()}
+		];
+		t7.rangePresets = newPresets;
+		flush(function() {
+			expect(t7.rangeValue).to.equal("Last 2 Days");
+			done();
+		});
+	});
 });
 </script>
 </body>