Added new relative date input shorthand (closes #1773)

README.md

@@ -88,6 +88,8 @@ The following shorthands are available:
   - Example: `20210417` will be converted to `2021-04-17`
 - `YYYYMMe` or `YYYYMM+` gets expanded to the end of the given month in the given year in proper notation
   - Example: `202107e` will be converted to `2021-07-31`
+- `[+/-]n[d/m/y]` gets expanded to a date relative to today, while adding `+` or subtracting `-` the number of days/months/years, in proper notation
+  - Example: `+1m` will be converted to the same day next month
 - `x` gets expanded to `2999-12-31` (which is an alias for "never overdue")
 - Down/up arrow keys will increase/decrease the date by 1 day
 - Right/left arrow keys will increase/decrease the date by 1 week

changelog/66_UNRELEASED_xxxx-xx-xx.md

@@ -5,6 +5,7 @@
 - When using LDAP authentication, the configured `LDAP_UID_ATTR` is now used to compare if the user already exists instead of the username entered on the login page (that prevents creating multiple users if you entere the username in different notations) (thanks @FloSet)
 - When using reverse proxy authentication (`ReverseProxyAuthMiddleware`), it's now also possible to pass the username in an environment variable instead of an HTTP header (new `config.php` option `REVERSE_PROXY_AUTH_USE_ENV`) (thanks @Forceu)
 - Performance improvements (page loading time) of the recipes page
+- New input shorthand `[+/-]n[d/m/y]` for date fields to quickly input a date relative to today (adding `+` or subtracting `-` the number of days/months/years, see the full list of available shorthands [here](https://github.com/grocy/grocy#input-shorthands-for-date-fields))
 - Fixed that stock entry labels on purchase were printed, even when "No label" was selected (was only a problem when running label printer WebHooks server side)
 - Fixed that when adding missing recipe ingredients, with the option "Only check if any amount is in stock" enabled, to the shopping list, unit conversions (if any) weren't considered
 - Fixed that the meal plan showed the total calories per recipe (instead of per serving as stated by the suffix)

public/viewjs/components/datetimepicker.js

@@ -130,24 +130,25 @@ 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 input is empty and any arrow key is pressed, set date to today
+	// 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))
 	{
 		Grocy.Components.DateTimePicker.SetValue(moment(new Date(), format, true).format(format), inputElement);
 		nextInputElement.focus();
 	}
-	else if (value === 'x' || value === 'X')
+	else if (value === 'x' || value === 'X') // Shorthand for never overdue
 	{
 		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))
+	else if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd)) // Shorthand for MMDD
 	{
 		var date = moment((new Date()).getFullYear().toString() + value);
 		if (date.isBefore(moment()))
@@ -157,17 +158,38 @@ Grocy.Components.DateTimePicker.GetInputElement().on('keyup', function(e)
 		Grocy.Components.DateTimePicker.SetValue(date.format(format), inputElement);
 		nextInputElement.focus();
 	}
-	else if (value.length === 8 && $.isNumeric(value))
+	else if (value.length === 8 && $.isNumeric(value)) // Shorthand for YYYYMMDD
 	{
 		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() === "+"))
+	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/+]
 	{
 		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 = 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

@@ -130,24 +130,25 @@ 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 input is empty and any arrow key is pressed, set date to today
+	// 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))
 	{
 		Grocy.Components.DateTimePicker2.SetValue(moment(new Date(), format, true).format(format), inputElement);
 		nextInputElement.focus();
 	}
-	else if (value === 'x' || value === 'X')
+	else if (value === 'x' || value === 'X') // Shorthand for never overdue
 	{
 		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))
+	else if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd)) // Shorthand for MMDD
 	{
 		var date = moment((new Date()).getFullYear().toString() + value);
 		if (date.isBefore(moment()))
@@ -157,17 +158,38 @@ Grocy.Components.DateTimePicker2.GetInputElement().on('keyup', function(e)
 		Grocy.Components.DateTimePicker2.SetValue(date.format(format), inputElement);
 		nextInputElement.focus();
 	}
-	else if (value.length === 8 && $.isNumeric(value))
+	else if (value.length === 8 && $.isNumeric(value)) // Shorthand for YYYYMMDD
 	{
 		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() === "+"))
+	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/+]
 	{
 		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 = 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);