Merge pull request #26 from MartinNuc/jump-on-separator-press

Jump on next segment when pressing separator key
eight04 · Apr 12, 2016 · 1e28dab · 1e28dab
2 parents 799d0dc + 1b2b544
commit 1e28dab
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -75,6 +75,7 @@ Check demo page for live example.
 <input type="text" datetime="yyyy-MM-dd" ng-model="myDate" min="Jan 1, 1990" max="Dec 31, 2050">
 <input type="text" datetime="yyyy-MM-dd" ng-model="myDate" datetime-model="yyyy-MM-ddTHH:mm:ss">
 <input type="text" datetime="yyyy-MM-dd" ng-model="myDate" default="Jan 1, 2000">
+<input type="text" datetime="dd.MM.yyyy" ng-model="myDate" datetime-separator=",">
 ```
 
 Parsing errors
@@ -103,6 +104,9 @@ Todos
 
 Changelog
 ---------
+* next
+    - jump on the next segment on pressing next separator key
+    - customizable separator key
 * 3.0.1 (Apr 9, 2016)
 	- Fix validator and datetime-model bug. [#27](https://github.com/eight04/angular-datetime/issues/27)
 * 3.0.0 (Apr 1, 2016)

diff --git a/example/demo-angular-1.5.html b/example/demo-angular-1.5.html
@@ -134,5 +134,12 @@ <h3>Other tests</h3>
 			<pre class="code"><code>{{data.myDateString2 | json}}</code></pre>
 		</label>
 	</div>
+	<h3>Custom separator</h3>
+	<p>Used to jump on the next segment when pressing separator key. In this example angular-datetime will jump on the next segment when pressing `.` or `,`.</p>
+	<div class="form-group">
+		<label>
+			<input type="text" class="form-control" datetime="dd.MM.yyyy" ng-model="data.myDate" datetime-separator=",">
+		</label>
+	</div>
 </body>
 </html>
diff --git a/example/demo.html b/example/demo.html
@@ -135,5 +135,12 @@ <h3>Other tests</h3>
 			<pre class="code"><code>{{data.myDateString2 | json}}</code></pre>
 		</label>
 	</div>
+	<h3>Custom separator</h3>
+	<p>Used to jump on the next segment when pressing separator key. In this example angular-datetime will jump on the next segment when pressing <code>.</code> or <code>,</code>.</p>
+	<div class="form-group">
+		<label>
+			<input type="text" class="form-control" datetime="dd.MM.yyyy" ng-model="data.myDate" datetime-separator=",">
+		</label>
+	</div>
 </body>
 </html>
diff --git a/src/directive.js b/src/directive.js
@@ -192,8 +192,14 @@ angular.module("datetime").directive("datetime", function(datetime, $log, $docum
 				node: null,
 				start: 0,
 				end: 0
-			};
-
+			},
+			lastError;
+		var datetimeSeparator;
+
+		if (angular.isDefined(attrs.datetimeSeparator)) {
+			datetimeSeparator = attrs.datetimeSeparator;
+		}
+
 		if (angular.isDefined(attrs.datetimeUtc)) {
 			parser.setTimezone("+0000");
 			if (modelParser) {
@@ -262,9 +268,12 @@ angular.module("datetime").directive("datetime", function(datetime, $log, $docum
 				return null;
 			}
 
+			ngModel.$setValidity("tooShort", true);
+
 			try {
 				parser.parse(viewValue);
 			} catch (err) {
+				lastError = err;
 				$log.error(err);
 
 				ngModel.$setValidity("datetime", false);
@@ -312,6 +321,8 @@ angular.module("datetime").directive("datetime", function(datetime, $log, $docum
 				return undefined;
 			}
 
+			lastError = null;
+
 			ngModel.$setValidity("datetime", true);
 
 			if (ngModel.$validate || validMinMax(parser.getDate())) {
@@ -446,7 +457,29 @@ angular.module("datetime").directive("datetime", function(datetime, $log, $docum
 					break;
 
 				case "keypress":
-					if (isPrintableKey(e)) {
+					var nextSeparatorKeyCode;
+					// check for separator only when there is a next node which is static string
+					if (range.node.next && range.node.next.token.name === "string" && range.node.next.token.type === "static") {
+						nextSeparatorKeyCode = range.node.next.viewValue.charCodeAt(0);
+					}
+
+					if (e.keyCode === nextSeparatorKeyCode || (datetimeSeparator && e.keyCode == datetimeSeparator.charCodeAt(0))) {
+						e.preventDefault();
+						if (!ngModel.$error.datetime) {
+							selectRange(range, "next");
+						}
+						else if (lastError && lastError.code == "NUMBER_TOOSHORT") {
+							parser.nodeParseValue(lastError.node, lastError.properValue);
+							ngModel.$setViewValue(parser.getText());
+							ngModel.$setValidity("tooShort", true);
+							ngModel.$render();
+							scope.$apply();
+							selectRange(range, "next");
+						} else {
+							selectRange(errorRange);
+						}
+					}
+					else if (isPrintableKey(e)) {
 						setTimeout(function(){
 							range = getRange(element, parser.nodes, range.node);
 							if (isRangeAtEnd(range)) {

diff --git a/src/factory.js b/src/factory.js
@@ -509,7 +509,8 @@ angular.module("datetime").factory("datetime", function($locale){
 						text: text,
 						node: p,
 						pos: pos,
-						match: value
+						match: value,
+						properValue: num2str(+value, p.token.minLength, p.token.maxLength)
 					};
 				}