Optimized date input shorthand handling (fixes #2806)

changelog/81_UNRELEASED_xxxx-xx-xx.md

@@ -13,6 +13,7 @@
 - Optimized the line plot markers color of the price history chart (product card) (thanks @DeepCoreSystem)
 - Fixed that German Umlauts were removed from product names when looking up a barcode via the built-in Open Food Facts external barcode lookup plugin
 - Fixed that when using/scanning a barcode on the purchase page with a note attached (which prefills the note field) and when manually selecting another product afterwards, the note of the previously used barcode was incorrectly prefilled again
+- Fixed that the "next input focus handling" (jumping to the next input after entering a value) didn't work at some places (e.g. after entering a purchased date on the purchase page)
 
 ### Shopping list
 
@@ -53,7 +54,7 @@
 
 ### General
 
-- xxx
+- Fixed that the date input shorthand `[+/-]n[d/m/y]` didn't work when the value lenght was >= 4 (e.g. `+10d`)
 
 ### API
 

public/viewjs/components/datetimepicker.js

@@ -132,13 +132,14 @@ Grocy.Components.DateTimePicker.GetInputElement().on('keyup', function(e)
 
 	var inputElement = $(e.currentTarget)
 	var value = inputElement.val();
-	var lastCharacter = value.slice(-1).toLowerCase();
-	var now = new Date();
-	var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
-	var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
 	var format = inputElement.data('format');
 	var nextInputElement = $(inputElement.data('next-input-selector'));
 
+	if (!nextInputElement.is("input"))
+	{
+		nextInputElement = nextInputElement.find("input");
+	}
+
 	// If input is empty and any arrow key is pressed, set date to today
 	if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
 	{
@@ -150,7 +151,36 @@ Grocy.Components.DateTimePicker.GetInputElement().on('keyup', function(e)
 		Grocy.Components.DateTimePicker.SetValue(moment('2999-12-31 23:59:59').format(format), inputElement);
 		nextInputElement.focus();
 	}
-	else if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd)) // Shorthand for MMDD
+	else if ((value.startsWith("+") || value.startsWith("-"))) // Shorthand for [+/-]n[d/m/y]
+	{
+		var lastCharacter = value.slice(-1).toLowerCase();
+
+		if (lastCharacter == "d" || lastCharacter == "m" || lastCharacter == "y")
+		{
+			var n = Number.parseInt(value.substring(1, value.length - 1));
+			if (value.startsWith("-"))
+			{
+				n = n * -1;
+			}
+
+			if (lastCharacter == "d")
+			{
+				Grocy.Components.DateTimePicker.SetValue(moment().add(n, "days").format(format));
+				nextInputElement.focus();
+			}
+			else if (lastCharacter == "m")
+			{
+				Grocy.Components.DateTimePicker.SetValue(moment().add(n, "months").format(format));
+				nextInputElement.focus();
+			}
+			else if (lastCharacter == "y")
+			{
+				Grocy.Components.DateTimePicker.SetValue(moment().add(n, "years").format(format));
+				nextInputElement.focus();
+			}
+		}
+	}
+	else if (value.length === 4 && $.isNumeric(value) && Number.parseInt(value.substring(0, 2)) >= 1 && Number.parseInt(value.substring(0, 2)) <= 12) // Shorthand for MMDD
 	{
 		var date = moment((new Date()).getFullYear().toString() + value);
 		if (date.isBefore(moment()))
@@ -165,33 +195,12 @@ Grocy.Components.DateTimePicker.GetInputElement().on('keyup', function(e)
 		Grocy.Components.DateTimePicker.SetValue(value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'), inputElement);
 		nextInputElement.focus();
 	}
-	else if (value.length === 7 && $.isNumeric(value.substring(0, 6)) && (value.substring(6, 7).toLowerCase() === "e" || value.substring(6, 7).toLowerCase() === "+")) // Shorthand for YYYYMM[e/+]
+	else if (value.length === 7 && $.isNumeric(value.substring(0, 6)) && (value.substring(6, 7).toLowerCase() === "e" || value.substring(6, 7) === "+")) // Shorthand for YYYYMM[e/+]
 	{
 		var date = moment(value.substring(0, 4) + "-" + value.substring(4, 6) + "-01").endOf("month");
 		Grocy.Components.DateTimePicker.SetValue(date.format(format), inputElement);
 		nextInputElement.focus();
 	}
-	else if ((value.startsWith("+") || value.startsWith("-")) && (lastCharacter == "d" || lastCharacter == "m" || lastCharacter == "y")) // Shorthand for [+/-]n[d/m/y]
-	{
-		var n = Number.parseInt(value.substring(1, value.length - 1));
-		if (value.startsWith("-"))
-		{
-			n = n * -1;
-		}
-
-		if (lastCharacter == "d")
-		{
-			Grocy.Components.DateTimePicker.SetValue(moment().add(n, "days").format(format));
-		}
-		else if (lastCharacter == "m")
-		{
-			Grocy.Components.DateTimePicker.SetValue(moment().add(n, "months").format(format));
-		}
-		else if (lastCharacter == "y")
-		{
-			Grocy.Components.DateTimePicker.SetValue(moment().add(n, "years").format(format));
-		}
-	}
 	else
 	{
 		var dateObj = moment(value, format, true);

public/viewjs/components/datetimepicker2.js

@@ -132,13 +132,14 @@ Grocy.Components.DateTimePicker2.GetInputElement().on('keyup', function(e)
 
 	var inputElement = $(e.currentTarget)
 	var value = inputElement.val();
-	var lastCharacter = value.slice(-1).toLowerCase();
-	var now = new Date();
-	var centuryStart = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '00');
-	var centuryEnd = Number.parseInt(now.getFullYear().toString().substring(0, 2) + '99');
 	var format = inputElement.data('format');
 	var nextInputElement = $(inputElement.data('next-input-selector'));
 
+	if (!nextInputElement.is("input"))
+	{
+		nextInputElement = nextInputElement.find("input");
+	}
+
 	// If input is empty and any arrow key is pressed, set date to today
 	if (value.length === 0 && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39))
 	{
@@ -150,7 +151,36 @@ Grocy.Components.DateTimePicker2.GetInputElement().on('keyup', function(e)
 		Grocy.Components.DateTimePicker2.SetValue(moment('2999-12-31 23:59:59').format(format), inputElement);
 		nextInputElement.focus();
 	}
-	else if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd)) // Shorthand for MMDD
+	else if ((value.startsWith("+") || value.startsWith("-"))) // Shorthand for [+/-]n[d/m/y]
+	{
+		var lastCharacter = value.slice(-1).toLowerCase();
+
+		if (lastCharacter == "d" || lastCharacter == "m" || lastCharacter == "y")
+		{
+			var n = Number.parseInt(value.substring(1, value.length - 1));
+			if (value.startsWith("-"))
+			{
+				n = n * -1;
+			}
+
+			if (lastCharacter == "d")
+			{
+				Grocy.Components.DateTimePicker2.SetValue(moment().add(n, "days").format(format));
+				nextInputElement.focus();
+			}
+			else if (lastCharacter == "m")
+			{
+				Grocy.Components.DateTimePicker2.SetValue(moment().add(n, "months").format(format));
+				nextInputElement.focus();
+			}
+			else if (lastCharacter == "y")
+			{
+				Grocy.Components.DateTimePicker2.SetValue(moment().add(n, "years").format(format));
+				nextInputElement.focus();
+			}
+		}
+	}
+	else if (value.length === 4 && $.isNumeric(value) && Number.parseInt(value.substring(0, 2)) >= 1 && Number.parseInt(value.substring(0, 2)) <= 12) // Shorthand for MMDD
 	{
 		var date = moment((new Date()).getFullYear().toString() + value);
 		if (date.isBefore(moment()))
@@ -165,33 +195,12 @@ Grocy.Components.DateTimePicker2.GetInputElement().on('keyup', function(e)
 		Grocy.Components.DateTimePicker2.SetValue(value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'), inputElement);
 		nextInputElement.focus();
 	}
-	else if (value.length === 7 && $.isNumeric(value.substring(0, 6)) && (value.substring(6, 7).toLowerCase() === "e" || value.substring(6, 7).toLowerCase() === "+")) // Shorthand for YYYYMM[e/+]
+	else if (value.length === 7 && $.isNumeric(value.substring(0, 6)) && (value.substring(6, 7).toLowerCase() === "e" || value.substring(6, 7) === "+")) // Shorthand for YYYYMM[e/+]
 	{
 		var date = moment(value.substring(0, 4) + "-" + value.substring(4, 6) + "-01").endOf("month");
 		Grocy.Components.DateTimePicker2.SetValue(date.format(format), inputElement);
 		nextInputElement.focus();
 	}
-	else if ((value.startsWith("+") || value.startsWith("-")) && (lastCharacter == "d" || lastCharacter == "m" || lastCharacter == "y")) // Shorthand for [+/-]n[d/m/y]
-	{
-		var n = Number.parseInt(value.substring(1, value.length - 1));
-		if (value.startsWith("-"))
-		{
-			n = n * -1;
-		}
-
-		if (lastCharacter == "d")
-		{
-			Grocy.Components.DateTimePicker2.SetValue(moment().add(n, "days").format(format));
-		}
-		else if (lastCharacter == "m")
-		{
-			Grocy.Components.DateTimePicker2.SetValue(moment().add(n, "months").format(format));
-		}
-		else if (lastCharacter == "y")
-		{
-			Grocy.Components.DateTimePicker2.SetValue(moment().add(n, "years").format(format));
-		}
-	}
 	else
 	{
 		var dateObj = moment(value, format, true);

views/components/datetimepicker2.blade.php

@@ -69,22 +69,20 @@
 		<div id="datetimepicker2-earlier-than-info"
 			class="form-text text-info font-italic w-100 d-none">{{ $earlierThanInfoText }}</div>
 		@if(isset($shortcutValue) && isset($shortcutLabel))
-		<div class="form-group mt-n2 mb-0>
+		<div class="form-group mt-n2 mb-0">
-			<div class="
+			<div class="custom-control custom-checkbox">
-			custom-control
+				<input class="form-check-input custom-control-input"
-			custom-checkbox">
+					type="checkbox"
-			<input class="form-check-input custom-control-input"
+					id="datetimepicker2-shortcut"
-				type="checkbox"
+					name="datetimepicker2-shortcut"
-				id="datetimepicker2-shortcut"
+					value="1"
-				name="datetimepicker2-shortcut"
+					data-datetimepicker2-shortcut-value="{{ $shortcutValue }}"
-				value="1"
+					tabindex="-1">
-				data-datetimepicker2-shortcut-value="{{ $shortcutValue }}"
+				<label class="form-check-label custom-control-label"
-				tabindex="-1">
+					for="datetimepicker2-shortcut">{{ $__t($shortcutLabel) }}
-			<label class="form-check-label custom-control-label"
+				</label>
-				for="datetimepicker2-shortcut">{{ $__t($shortcutLabel) }}
+			</div>
-			</label>
 		</div>
+		@endif
 	</div>
-	@endif
-</div>
 </div>