Fixed the rest of the broken stuff after the dependency upgrade party

2025-04-28 17:23:56 +00:00 · 2018-07-12 19:12:31 +02:00 · 2018-07-12 19:12:31 +02:00 · 37d1377f99
commit 37d1377f99
parent 778191fd11
27 changed files with 271 additions and 236 deletions
--- a/app.php
+++ b/app.php
@ -8,6 +8,7 @@ use \Grocy\Controllers\LoginController;

 require_once __DIR__ . '/vendor/autoload.php';
 require_once __DIR__ . '/data/config.php';
+require_once __DIR__ . '/config-dist.php'; //For not in own config defined values we use the default ones

 // Setup base application
 $appContainer = new \Slim\Container([
--- a/config-dist.php
+++ b/config-dist.php
@ -1,26 +1,26 @@
 <?php

 # Login credentials
-define('HTTP_USER', 'admin');
-define('HTTP_PASSWORD', 'admin');
+Setting('HTTP_USER', 'admin');
+Setting('HTTP_PASSWORD', 'admin');

 # Either "production" or "dev"
-define('MODE', 'production');
+Setting('MODE', 'production');

 # Either "en" or "de" or the filename (without extension) of
 # one of the other available localization files in the "/localization" directory
-define('CULTURE', 'en');
+Setting('CULTURE', 'en');

 # The base url of your installation,
 # should be just "/" when running directly under the root of a (sub)domain
 # or for example "https:/example.com/grocy" when using a subdirectory
-define('BASE_URL', '/');
+Setting('BASE_URL', '/');

 # The plugin to use for external barcode lookups,
 # must be the filename without .php extension and must be located in /data/plugins,
 # see /data/plugins/DemoBarcodeLookupPlugin.php for an example implementation
-define('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');
+Setting('STOCK_BARCODE_LOOKUP_PLUGIN', 'DemoBarcodeLookupPlugin');

 # If, however, your webserver does not support URL rewriting,
 # set this to true
-define('DISABLE_URL_REWRITING', false);
+Setting('DISABLE_URL_REWRITING', false);
--- a/helpers/extensions.php
+++ b/helpers/extensions.php
@ -122,3 +122,16 @@ function IsIsoDateTime($dateTimeString)
 	$d = DateTime::createFromFormat('Y-m-d H:i:s', $dateTimeString);
 	return $d && $d->format('Y-m-d H:i:s') === $dateTimeString;
 }
+
+function BoolToString(bool $bool)
+{
+	return $bool ? 'true' : 'false';
+}
+
+function Setting(string $name, string $value)
+{
+	if (!defined($name))
+	{
+		define($name, $value);
+	}
+}
--- a/localization/de.php
+++ b/localization/de.php
@ -141,6 +141,9 @@ return array(
 	'This cannot be negative' => 'Dies darf nicht negativ sein',
 	'A quantity unit is required' => 'Eine Mengeneinheit muss ausgewählt werden',
 	'A period type is required' => 'Eine Periodentyp muss ausgewählt werden',
+	'A best before date is required and must be later than today' => 'Ein Mindesthaltbarkeitsdatum ist erforderlich und muss später als heute sein',
+	'Settings' => 'Einstellungen',
+	'This can only be before now' => 'Dies kann nur vor jetzt sein',
 	
 	//Constants
 	'manually' => 'Manuell',
@ -150,7 +153,6 @@ return array(
 	'timeago_locale' => 'de',
 	'timeago_nan' => 'vor NaN Jahren',
 	'moment_locale' => 'de',
-	'bootstrap_datepicker_locale' => 'de',
 	'datatables_localization' => '{"sEmptyTable":"Keine Daten in der Tabelle vorhanden","sInfo":"_START_ bis _END_ von _TOTAL_ Einträgen","sInfoEmpty":"Keine Daten vorhanden","sInfoFiltered":"(gefiltert von _MAX_ Einträgen)","sInfoPostFix":"","sInfoThousands":".","sLengthMenu":"_MENU_ Einträge anzeigen","sLoadingRecords":"Wird geladen ..","sProcessing":"Bitte warten ..","sSearch":"Suchen","sZeroRecords":"Keine Einträge vorhanden","oPaginate":{"sFirst":"Erste","sPrevious":"Zurück","sNext":"Nächste","sLast":"Letzte"},"oAria":{"sSortAscending":": aktivieren, um Spalte aufsteigend zu sortieren","sSortDescending":": aktivieren, um Spalte absteigend zu sortieren"},"select":{"rows":{"0":"Zum Auswählen auf eine Zeile klicken","1":"1 Zeile ausgewählt","_":"%d Zeilen ausgewählt"}},"buttons":{"print":"Drucken","colvis":"Spalten","copy":"Kopieren","copyTitle":"In Zwischenablage kopieren","copyKeys":"Taste <i>ctrl</i> oder <i>⌘</i> + <i>C</i> um Tabelle<br>in Zwischenspeicher zu kopieren.<br><br>Um abzubrechen die Nachricht anklicken oder Escape drücken.","copySuccess":{"1":"1 Spalte kopiert","_":"%d Spalten kopiert"}}}',
 	
 	//Demo data
--- a/localization/en.php
+++ b/localization/en.php
@ -9,6 +9,5 @@ return array(
 	'timeago_locale' => 'en',
 	'timeago_nan' => 'NaN years ago',
 	'moment_locale' => '',
-	'bootstrap_datepicker_locale' => '',
 	'datatables_localization' => '{"sEmptyTable":"No data available in table","sInfo":"Showing _START_ to _END_ of _TOTAL_ entries","sInfoEmpty":"Showing 0 to 0 of 0 entries","sInfoFiltered":"(filtered from _MAX_ total entries)","sInfoPostFix":"","sInfoThousands":",","sLengthMenu":"Show _MENU_ entries","sLoadingRecords":"Loading...","sProcessing":"Processing...","sSearch":"Search:","sZeroRecords":"No matching records found","oPaginate":{"sFirst":"First","sLast":"Last","sNext":"Next","sPrevious":"Previous"},"oAria":{"sSortAscending":": activate to sort column ascending","sSortDescending":": activate to sort column descending"}}'
 );
--- a/package.json
+++ b/package.json
@ -7,7 +7,6 @@
 		"TagManager": "https://github.com/max-favilli/tagmanager.git#3.0.2",
 		"bootbox": "https://github.com/makeusabrew/bootbox.git#v5.x",
 		"bootstrap": "^4.1.1",
-		"bootstrap-datepicker": "^1.8.0",
 		"bootstrap-side-navbar": "https://github.com/samrayner/bootstrap-side-navbar.git#1.0.1",
 		"datatables.net": "^1.10.19",
 		"datatables.net-bs4": "^1.10.19",
--- a/public/viewjs/components/datepicker.js
+++ b/public/viewjs/components/datepicker.js
@ -1,92 +0,0 @@
-$(function()
-{
-	$('.datepicker').datepicker(
-	{
-		format: 'yyyy-mm-dd',
-		startDate: '+0d',
-		todayHighlight: true,
-		autoclose: true,
-		calendarWeeks: true,
-		orientation: 'bottom auto',
-		weekStart: 1,
-		showOnFocus: false,
-		language: L('bootstrap_datepicker_locale')
-	});
-	$('.datepicker').trigger('change');
-
-	EmptyElementWhenMatches('#datepicker-timeago', L('timeago_nan'));
-});
-
-$('.datepicker').on('keydown', function(e)
-{
-	if (e.keyCode === 13) //Enter
-	{
-		$('.datepicker').trigger('change');
-	}
-});
-
-$('.datepicker').on('keypress', function(e)
-{
-	var element = $(e.target);
-	var value = element.val();
-	var dateObj = moment(element.val(), 'YYYY-MM-DD', true);
-
-	$('.datepicker').datepicker('hide');
-
-	//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))
-	{
-		dateObj = moment(new Date(), 'YYYY-MM-DD', true);
-	}
-
-	if (dateObj.isValid())
-	{
-		if (e.keyCode === 38) //Up
-		{
-			element.val(dateObj.add(-1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 40) //Down
-		{
-			element.val(dateObj.add(1, 'days').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 37) //Left
-		{
-			element.val(dateObj.add(-1, 'weeks').format('YYYY-MM-DD'));
-		}
-		else if (e.keyCode === 39) //Right
-		{
-			element.val(dateObj.add(1, 'weeks').format('YYYY-MM-DD'));
-		}
-	}
-});
-
-$('.datepicker').on('change', function(e)
-{
-	var value = $('.datepicker').val();
-	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');
-
-	if (value === 'x' || value === 'X') {
-		value = '29991231';
-	}
-
-	if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
-	{
-		value = (new Date()).getFullYear().toString() + value;
-	}
-
-	if (value.length === 8 && $.isNumeric(value))
-	{
-		value = value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
-		$('.datepicker').val(value);
-	}
-
-	$('#datepicker-timeago').text($.timeago($('.datepicker').val()));
-	EmptyElementWhenMatches('#datepicker-timeago', L('timeago_nan'));
-});
-
-$('#datepicker-button').on('click', function(e)
-{
-	$('.datepicker').datepicker('show');
-});
--- a/public/viewjs/components/datetimepicker.js
+++ b/public/viewjs/components/datetimepicker.js
@ -1,27 +1,162 @@
-$(function()
+Grocy.Components.DateTimePicker = { };
+
+Grocy.Components.DateTimePicker.GetInputElement = function()
 {
-	$('.datetimepicker').datetimepicker(
-	{
-		format: 'YYYY-MM-DD HH:mm:ss',
-		buttons: {
-			showToday: true,
-			showClose: true
-		},
-		calendarWeeks: true,
-		maxDate: moment(),
-		locale: moment.locale(),
-		defaultDate: moment().format('YYYY-MM-DD HH:mm:ss'),
-		icons: {
-			time: 'far fa-clock',
-			date: 'far fa-calendar',
-			up: 'fas fa-arrow-up',
-			down: 'fas fa-arrow-down',
-			previous: 'fas fa-chevron-left',
-			next: 'fas fa-chevron-right',
-			today: 'fas fa-calendar-check',
-			clear: 'far fa-trash-alt',
-			close: 'far fa-times-circle'
-		},
-		sideBySide: true
-	});
+	return $('.datetimepicker').find('input');
+}
+
+Grocy.Components.DateTimePicker.GetValue = function()
+{
+	return Grocy.Components.DateTimePicker.GetInputElement().val();
+}
+
+Grocy.Components.DateTimePicker.SetValue = function(value)
+{
+	Grocy.Components.DateTimePicker.GetInputElement().val(value);
+	Grocy.Components.DateTimePicker.GetInputElement().trigger('change');
+}
+
+var startDate = null;
+if (Grocy.Components.DateTimePicker.GetInputElement().data('init-with-now') === true)
+{
+	startDate = moment().format(Grocy.Components.DateTimePicker.GetInputElement().data('format'));
+}
+
+var limitDate = moment('2999-12-31 23:59:59');
+if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-end-to-now') === true)
+{
+	limitDate = moment();
+}
+
+$('.datetimepicker').datetimepicker(
+{
+	format: Grocy.Components.DateTimePicker.GetInputElement().data('format'),
+	buttons: {
+		showToday: true,
+		showClose: true
+	},
+	calendarWeeks: true,
+	maxDate: limitDate,
+	locale: moment.locale(),
+	defaultDate: startDate,
+	useCurrent: false,
+	icons: {
+		time: 'far fa-clock',
+		date: 'far fa-calendar',
+		up: 'fas fa-arrow-up',
+		down: 'fas fa-arrow-down',
+		previous: 'fas fa-chevron-left',
+		next: 'fas fa-chevron-right',
+		today: 'fas fa-calendar-check',
+		clear: 'far fa-trash-alt',
+		close: 'far fa-times-circle'
+	},
+	sideBySide: true,
+	keyBinds: {
+		up: function(widget) { },
+		down: function(widget) { },
+		'control up': function(widget) { },
+		'control down': function(widget) { },
+		left: function(widget) { },
+		right: function(widget) { },
+		pageUp: function(widget) { },
+		pageDown: function(widget) { },
+		enter: function(widget) { },
+		escape: function(widget) { },
+		'control space': function(widget) { },
+		t: function(widget) { },
+		'delete': function(widget) { }
+	}
+});
+
+Grocy.Components.DateTimePicker.GetInputElement().on('keyup', function(e)
+{
+	$('.datetimepicker').datetimepicker('hide');
+
+	var value = Grocy.Components.DateTimePicker.GetValue();
+	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 = Grocy.Components.DateTimePicker.GetInputElement().data('format');
+	var nextInputElement = $(Grocy.Components.DateTimePicker.GetInputElement().data('next-input-selector'));
+
+	//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));
+		nextInputElement.focus();
+	}
+	else if (value === 'x' || value === 'X')
+	{
+		Grocy.Components.DateTimePicker.SetValue(moment('2999-12-31 23:59:59').format(format));
+		nextInputElement.focus();
+	}
+	else if (value.length === 4 && !(Number.parseInt(value) > centuryStart && Number.parseInt(value) < centuryEnd))
+	{
+		Grocy.Components.DateTimePicker.SetValue((new Date()).getFullYear().toString() + value);
+		nextInputElement.focus();
+	}
+	else if (value.length === 8 && $.isNumeric(value))
+	{
+		Grocy.Components.DateTimePicker.SetValue(value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'));
+		nextInputElement.focus();
+	}
+	else
+	{
+		var dateObj = moment(value, format, true);
+		if (dateObj.isValid())
+		{
+			if (e.keyCode === 38) //Up
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(-1, 'days').format(format));
+			}
+			else if (e.keyCode === 40) //Down
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(1, 'days').format(format));
+			}
+			else if (e.keyCode === 37) //Left
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(-1, 'weeks').format(format));
+			}
+			else if (e.keyCode === 39) //Right
+			{
+				Grocy.Components.DateTimePicker.SetValue(dateObj.add(1, 'weeks').format(format));
+			}
+		}
+	}
+
+	//Custom validation
+	value = Grocy.Components.DateTimePicker.GetValue();
+	dateObj = moment(value, format, true);
+	var element = Grocy.Components.DateTimePicker.GetInputElement()[0];
+	if (!dateObj.isValid())
+	{
+		element.setCustomValidity("error");
+	}
+	else
+	{
+		if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-end-to-now') === true && dateObj.isAfter(moment()))
+		{
+			element.setCustomValidity("error");
+		}
+		else if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-start-to-now') === true && dateObj.isBefore(moment()))
+		{
+			element.setCustomValidity("error");
+		}
+		else
+		{
+			element.setCustomValidity("");
+		}
+	}
+});
+
+Grocy.Components.DateTimePicker.GetInputElement().on('input', function(e)
+{
+	$('#datetimepicker-timeago').text($.timeago(Grocy.Components.DateTimePicker.GetValue()));
+	EmptyElementWhenMatches('#datetimepicker-timeago', L('timeago_nan'));
+});
+
+$('.datetimepicker').on('update.datetimepicker', function(e)
+{
+	Grocy.Components.DateTimePicker.GetInputElement().trigger('input');
 });
--- a/public/viewjs/consume.js
+++ b/public/viewjs/consume.js
@ -96,17 +96,11 @@ $('#product_id').val('');
 $('#product_id_text_input').focus();
 $('#product_id_text_input').val('');
 $('#product_id_text_input').trigger('change');
+Grocy.FrontendHelpers.ValidateForm('consume-form');

 $('#amount').on('focus', function(e)
 {
-	if ($('#product_id_text_input').val().length === 0)
-	{
-		$('#product_id_text_input').focus();
-	}
-	else
-	{
-		$(this).select();
-	}
+	$(this).select();
 });

 $('#consume-form input').keyup(function (event)
--- a/public/viewjs/habittracking.js
+++ b/public/viewjs/habittracking.js
@ -7,16 +7,15 @@
 	Grocy.Api.Get('habits/get-habit-details/' + jsonForm.habit_id,
 		function (habitDetails)
 		{
-			Grocy.Api.Get('habits/track-habit-execution/' + jsonForm.habit_id + '?tracked_time=' + $('#tracked_time').find('input').val(),
+			Grocy.Api.Get('habits/track-habit-execution/' + jsonForm.habit_id + '?tracked_time=' + Grocy.Components.DateTimePicker.GetValue(),
 				function(result)
 				{
-					toastr.success(L('Tracked execution of habit #1 on #2', habitDetails.habit.name, $('#tracked_time').find('input').val()));
+					toastr.success(L('Tracked execution of habit #1 on #2', habitDetails.habit.name, Grocy.Components.DateTimePicker.GetValue()));

 					$('#habit_id').val('');
 					$('#habit_id_text_input').focus();
 					$('#habit_id_text_input').val('');
-					$('#tracked_time').find('input').val(moment().format('YYYY-MM-DD HH:mm:ss'));
-					$('#tracked_time').find('input').trigger('change');
+					Grocy.Components.DateTimePicker.SetValue(moment().format('YYYY-MM-DD HH:mm:ss'));
 					$('#habit_id_text_input').trigger('change');
 					Grocy.FrontendHelpers.ValidateForm('habittracking-form');
 				},
@ -40,7 +39,7 @@ $('#habit_id').on('change', function(e)
 	if (habitId)
 	{
 		Grocy.Components.HabitCard.Refresh(habitId);
-		$('#tracked_time').find('input').focus();
+		Grocy.Components.DateTimePicker.GetInputElement().focus();
 	}
 });

@ -48,9 +47,7 @@ $('.combobox').combobox({
 	appendId: '_text_input'
 });

-$('#habit_id').val('');
 $('#habit_id_text_input').focus();
-$('#habit_id_text_input').val('');
 $('#habit_id_text_input').trigger('change');
 Grocy.FrontendHelpers.ValidateForm('habittracking-form');

@ -75,7 +72,7 @@ $('#habittracking-form input').keydown(function(event)
 	}
 });

-$('#tracked_time').find('input').on('keypress', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 {
 	Grocy.FrontendHelpers.ValidateForm('habittracking-form');
 });
--- a/public/viewjs/inventory.js
+++ b/public/viewjs/inventory.js
@ -7,7 +7,7 @@
 	Grocy.Api.Get('stock/get-product-details/' + jsonForm.product_id,
 		function (productDetails)
 		{
-			Grocy.Api.Get('stock/inventory-product/' + jsonForm.product_id + '/' + jsonForm.new_amount + '?bestbeforedate=' + $('#best_before_date').val(),
+			Grocy.Api.Get('stock/inventory-product/' + jsonForm.product_id + '/' + jsonForm.new_amount + '?bestbeforedate=' + Grocy.Components.DateTimePicker.GetValue(),
 				function(result)
 				{
 					var addBarcode = GetUriParam('addbarcodetoselection');
@ -42,7 +42,7 @@
 					{
 						$('#inventory-change-info').addClass('d-none');
 						$('#new_amount').val('');
-						$('#best_before_date').val('');
+						Grocy.Components.DateTimePicker.SetValue('');
 						$('#product_id').val('');
 						$('#product_id_text_input').focus();
 						$('#product_id_text_input').val('');
@ -164,11 +164,11 @@ $('#product_id_text_input').on('change', function(e)
 });

 $('#new_amount').val('');
-$('#best_before_date').val('');
 $('#product_id').val('');
 $('#product_id_text_input').focus();
 $('#product_id_text_input').val('');
 $('#product_id_text_input').trigger('change');
+Grocy.FrontendHelpers.ValidateForm('inventory-form');

 $('#new_amount').on('focus', function(e)
 {
@ -234,55 +234,41 @@ $('#new_amount').on('keypress', function(e)
 	$('#new_amount').trigger('change');
 });
 	
-$('#best_before_date').on('change', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('change', function(e)
 {
 	Grocy.FrontendHelpers.ValidateForm('inventory-form');
 });

-$('#best_before_date').on('keypress', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 {
 	Grocy.FrontendHelpers.ValidateForm('inventory-form');
 });

-$('#best_before_date').on('keydown', function(e)
-{
-	if (e.keyCode === 13) //Enter
-	{
-		$('#best_before_date').trigger('change');
-	}
-});	
-
 $('#new_amount').on('keyup', function(e)
 {
-	if ($('#product_id').parent().hasClass('has-error'))
-	{
-		$('#inventory-change-info').addClass('d-none');
-		return;
-	}
-
 	var productId = $('#product_id').val();
-	var newAmount = $('#new_amount').val();
-
+	var newAmount = parseInt($('#new_amount').val());
+	
 	if (productId)
 	{
 		Grocy.Api.Get('stock/get-product-details/' + productId,
 			function(productDetails)
 			{
-				var productStockAmount = productDetails.stock_amount || '0';
-
+				var productStockAmount = parseInt(productDetails.stock_amount || '0');
+				
 				if (newAmount > productStockAmount)
 				{
 					var amountToAdd = newAmount - productDetails.stock_amount;
 					$('#inventory-change-info').text(L('This means #1 will be added to stock', amountToAdd.toString() + ' ' + productDetails.quantity_unit_stock.name));
-					$('#inventory-change-info').removeClass('d-none')
-					$('#best_before_date').attr('required', 'required');
+					$('#inventory-change-info').removeClass('d-none');
+					Grocy.Components.DateTimePicker.GetInputElement().attr('required', '');
 				}
 				else if (newAmount < productStockAmount)
 				{
 					var amountToRemove = productStockAmount - newAmount;
 					$('#inventory-change-info').text(L('This means #1 will be removed from stock', amountToRemove.toString() + ' ' + productDetails.quantity_unit_stock.name));
-					$('#inventory-change-info').removeClass('d-none')
-					$('#best_before_date').removeAttr('required');
+					$('#inventory-change-info').removeClass('d-none');
+					Grocy.Components.DateTimePicker.GetInputElement().removeAttr('required');
 				}
 				else
 				{
--- a/public/viewjs/purchase.js
+++ b/public/viewjs/purchase.js
@ -9,7 +9,7 @@
 		{
 			var amount = jsonForm.amount * productDetails.product.qu_factor_purchase_to_stock;

-			Grocy.Api.Get('stock/add-product/' + jsonForm.product_id + '/' + amount + '?bestbeforedate=' + $('#best_before_date').val(),
+			Grocy.Api.Get('stock/add-product/' + jsonForm.product_id + '/' + amount + '?bestbeforedate=' + Grocy.Components.DateTimePicker.GetValue(),
 				function(result)
 				{
 					var addBarcode = GetUriParam('addbarcodetoselection');
@ -43,7 +43,7 @@
 					else
 					{
 						$('#amount').val(0);
-						$('#best_before_date').val('');
+						Grocy.Components.DateTimePicker.SetValue('');
 						$('#product_id').val('');
 						$('#product_id_text_input').focus();
 						$('#product_id_text_input').val('');
@ -79,13 +79,12 @@ $('#product_id').on('change', function(e)
 				
 				if (productDetails.product.default_best_before_days.toString() !== '0')
 				{
-					$('#best_before_date').val(moment().add(productDetails.product.default_best_before_days, 'days').format('YYYY-MM-DD'));
-					$('#best_before_date').trigger('change');
+					Grocy.Components.DateTimePicker.SetValue(moment().add(productDetails.product.default_best_before_days, 'days').format('YYYY-MM-DD'));
 					$('#amount').focus();
 				}
 				else
 				{
-					$('#best_before_date').focus();
+					Grocy.Components.DateTimePicker.GetInputElement().focus();
 				}
 			},
 			function(xhr)
@ -174,19 +173,11 @@ $('#product_id_text_input').on('change', function(e)
 });

 $('#amount').val(0);
-$('#best_before_date').val('');
 $('#product_id').val('');
 $('#product_id_text_input').focus();
 $('#product_id_text_input').val('');
 $('#product_id_text_input').trigger('change');
-
-$('#best_before_date').on('focus', function(e)
-{
-	if ($('#product_id_text_input').val().length === 0)
-	{
-		$('#product_id_text_input').focus();
-	}
-});
+Grocy.FrontendHelpers.ValidateForm('purchase-form');

 $('#amount').on('focus', function(e)
 {
@ -235,7 +226,7 @@ if (prefillProduct !== undefined)
 		$('#product_id').val(possibleOptionElement.val());
 		$('#product_id').data('combobox').refresh();
 		$('#product_id').trigger('change');
-		$('#best_before_date').focus();
+		Grocy.Components.DateTimePicker.GetInputElement().focus();
 	}
 }

@ -247,12 +238,12 @@ if (addBarcode !== undefined)
 	$('#barcode-lookup-disabled-hint').removeClass('d-none');
 }

-$('#best_before_date').on('change', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('change', function(e)
 {
 	Grocy.FrontendHelpers.ValidateForm('purchase-form');
 });

-$('#best_before_date').on('keypress', function(e)
+Grocy.Components.DateTimePicker.GetInputElement().on('keypress', function(e)
 {
 	Grocy.FrontendHelpers.ValidateForm('purchase-form');
 });
--- a/public/viewjs/shoppinglistform.js
+++ b/public/viewjs/shoppinglistform.js
@ -42,6 +42,7 @@ $('#product_id').on('change', function(e)
 			function (productDetails)
 			{
 				$('#amount_qu_unit').text(productDetails.quantity_unit_purchase.name);
+				$('#amount').focus();
 			},
 			function(xhr)
 			{
@ -60,7 +61,8 @@ $('#product_id_text_input').on('change', function(e)
 	var input = $('#product_id_text_input').val().toString();
 	var possibleOptionElement = $("#product_id option[data-additional-searchdata*='" + input + "']").first();

-	if (possibleOptionElement.length > 0 && possibleOptionElement.text().length > 0) {
+	if (possibleOptionElement.length > 0 && possibleOptionElement.text().length > 0)
+	{
 		$('#product_id').val(possibleOptionElement.val());
 		$('#product_id').data('combobox').refresh();
 		$('#product_id').trigger('change');
@ -84,6 +86,10 @@ $('#amount').on('focus', function(e)
 	{
 		$('#product_id_text_input').focus();
 	}
+	else
+	{
+		$(this).select();
+	}
 });

 $('#shoppinglist-form input').keyup(function (event)
--- a/version.json
+++ b/version.json
@ -1,4 +1,4 @@
 {
-	"Version": "1.12.1",
-	"ReleaseDate": "2018-07-08"
+	"Version": "1.13.0",
+	"ReleaseDate": "2018-07-12"
 }
--- a/views/batteriesoverview.blade.php
+++ b/views/batteriesoverview.blade.php
@ -19,7 +19,7 @@

 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
 	</div>
 </div>
--- a/views/batterytracking.blade.php
+++ b/views/batterytracking.blade.php
@ -6,7 +6,7 @@

@section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h1>@yield('title')</h1>

 		<form id="batterytracking-form" novalidate>
@ -24,7 +24,12 @@

 			@include('components.datetimepicker', array(
 				'id' => 'tracked_time',
-				'label' => 'Tracked time'
+				'label' => 'Tracked time',
+				'format' => 'YYYY-MM-DD HH:mm:ss',
+				'initWithNow' => true,
+				'limitEndToNow' => true,
+				'limitStartToNow' => false,
+				'invalidFeedback' => $L('This can only be before now')
 			))

 			<button id="save-batterytracking-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
--- a/views/components/datepicker.blade.php
+++ b/views/components/datepicker.blade.php
@ -1,14 +0,0 @@
-@push('componentScripts')
-	<script src="{{ $U('/viewjs/components/datepicker.js', true) }}?v={{ $version }}"></script>
-@endpush
-
-<div class="form-group">
-	<label for="{{ $id }}">{{ $L($label) }}&nbsp;&nbsp;<span class="small text-muted"><time id="datepicker-timeago" class="timeago timeago-contextual"></time>@if(!empty($hint))<br>{{ $L($hint) }}@endif</span></label>
-	<div class="input-group date">
-		<input type="text" data-isodate="isodate" class="form-control datepicker" id="{{ $id }}" name="{{ $id }}" required autocomplete="off" min="2018-07-11">
-		<div id="datepicker-button" class="input-group-append">
-			<div class="input-group-text"><i class="fas fa-calendar"></i></div>
-		</div>
-	</div>
-	<div class="invalid-feedback"></div>
-</div>
--- a/views/components/datetimepicker.blade.php
+++ b/views/components/datetimepicker.blade.php
@ -3,12 +3,17 @@
@endpush

 <div class="form-group">
-	<label>{{ $L($label) }}</label>
+	<label for="{{ $id }}">{{ $L($label) }}&nbsp;&nbsp;<span class="small text-muted"><time id="datetimepicker-timeago" class="timeago timeago-contextual"></time>@if(!empty($hint))<br>{{ $L($hint) }}@endif</span></label>
 	<div class="input-group date datetimepicker" id="{{ $id }}" data-target-input="nearest">
-		<input type="text" class="form-control datetimepicker-input" data-target="#{{ $id }}"/>
+		<input type="text" required class="form-control datetimepicker-input"
+			data-target="#{{ $id }}" data-format="{{ $format }}"
+			data-init-with-now="{{ BoolToString($initWithNow) }}"
+			data-limit-end-to-now="{{ BoolToString($limitEndToNow) }}"
+			data-limit-start-to-now="{{ BoolToString($limitStartToNow) }}"
+			data-next-input-selector="{{ $nextInputSelector }}" />
 		<div class="input-group-append" data-target="#{{ $id }}" data-toggle="datetimepicker">
 			<div class="input-group-text"><i class="fas fa-calendar"></i></div>
 		</div>
+		<div class="invalid-feedback">{{ $invalidFeedback }}</div>
 	</div>
-	<div class="invalid-feedback"></div>
 </div>
--- a/views/consume.blade.php
+++ b/views/consume.blade.php
@ -6,7 +6,7 @@

@section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h1>@yield('title')</h1>

 		<form id="consume-form" novalidate>
--- a/views/habitsoverview.blade.php
+++ b/views/habitsoverview.blade.php
@ -19,7 +19,7 @@

 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
 	</div>
 </div>
--- a/views/habittracking.blade.php
+++ b/views/habittracking.blade.php
@ -6,7 +6,7 @@

@section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h1>@yield('title')</h1>

 		<form id="habittracking-form" novalidate>
@ -24,7 +24,12 @@

 			@include('components.datetimepicker', array(
 				'id' => 'tracked_time',
-				'label' => 'Tracked time'
+				'label' => 'Tracked time',
+				'format' => 'YYYY-MM-DD HH:mm:ss',
+				'initWithNow' => true,
+				'limitEndToNow' => true,
+				'limitStartToNow' => false,
+				'invalidFeedback' => $L('This can only be before now')
 			))

 			<button id="save-habittracking-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
--- a/views/inventory.blade.php
+++ b/views/inventory.blade.php
@ -6,7 +6,7 @@

@section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h1>@yield('title')</h1>

 		<form id="inventory-form" novalidate>
@ -29,11 +29,17 @@
 				<div class="invalid-feedback">{{ $L('The amount cannot be lower than #1', '0') }}</div>
 				<div id="inventory-change-info" class="form-text text-muted small d-none"></div>
 			</div>
-
-			@include('components.datepicker', array(
+			
+			@include('components.datetimepicker', array(
 				'id' => 'best_before_date',
 				'label' => 'Best before',
-				'hint' => 'This will apply to added products'
+				'hint' => 'This will apply to added products',
+				'format' => 'YYYY-MM-DD',
+				'initWithNow' => false,
+				'limitEndToNow' => false,
+				'limitStartToNow' => true,
+				'invalidFeedback' => $L('A best before date is required and must be later than today'),
+				'nextInputSelector' => '#best_before_date'
 			))

 			<button id="save-inventory-button" type="submit" class="btn btn-success">{{ $L('OK') }}</button>
--- a/views/layout/default.blade.php
+++ b/views/layout/default.blade.php
@ -16,7 +16,6 @@
 	<link href="{{ $U('/node_modules/bootstrap/dist/css/bootstrap.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/startbootstrap-sb-admin/css/sb-admin.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/@fortawesome/fontawesome-free/css/all.css?v=', true) }}{{ $version }}" rel="stylesheet">
-	<link href="{{ $U('/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
@ -163,7 +162,7 @@
 				@endif

 				<li class="nav-item dropdown">
-					<a class="nav-link dropdown-toggle discrete-link" href="#" data-toggle="dropdown"><i class="fas fa-wrench"></i></a>
+					<a class="nav-link dropdown-toggle discrete-link" href="#" data-toggle="dropdown"><i class="fas fa-wrench"></i> <span class="d-inline d-lg-none">{{ $L('Settings') }}</span></a>

 					<div class="dropdown-menu dropdown-menu-right">
 						<a class="dropdown-item discrete-link" href="{{ $U('/manageapikeys') }}"><i class="fas fa-handshake"></i>&nbsp;{{ $L('Manage API keys') }}</a>
@ -217,8 +216,6 @@
 	<script src="{{ $U('/node_modules/startbootstrap-sb-admin/js/sb-admin.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/bootbox/dist/bootbox.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/jquery-serializeJSON/jquery.serializejson.min.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js?v=', true) }}{{ $version }}"></script>
-	@if(!empty($L('bootstrap_datepicker_locale')))<script src="{{ $U('/node_modules', true) }}/bootstrap-datepicker/dist/locales/bootstrap-datepicker.{{ $L('bootstrap_datepicker_locale') }}.min.js?v={{ $version }}"></script>@endif
 	<script src="{{ $U('/node_modules/moment/min/moment.min.js?v=', true) }}{{ $version }}"></script>
 	@if(!empty($L('moment_locale')))<script src="{{ $U('/node_modules', true) }}/moment/locale/{{ $L('moment_locale') }}.js?v={{ $version }}"></script>@endif
 	<script src="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/js/bootstrap-combobox.js?v=', true) }}{{ $version }}"></script>
--- a/views/purchase.blade.php
+++ b/views/purchase.blade.php
@ -6,7 +6,7 @@

@section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h1>@yield('title')</h1>

 		<form id="purchase-form" novalidate>
@ -23,9 +23,15 @@
 				<div id="flow-info-addbarcodetoselection" class="form-text text-muted small d-none"><strong><span id="addbarcodetoselection"></span></strong> {{ $L('will be added to the list of barcodes for the selected product on submit') }}</div>
 			</div>

-			@include('components.datepicker', array(
+			@include('components.datetimepicker', array(
 				'id' => 'best_before_date',
-				'label' => 'Best before'
+				'label' => 'Best before',
+				'format' => 'YYYY-MM-DD',
+				'initWithNow' => false,
+				'limitEndToNow' => false,
+				'limitStartToNow' => true,
+				'invalidFeedback' => $L('A best before date is required and must be later than today'),
+				'nextInputSelector' => '#amount'
 			))

 			<div class="form-group">
--- a/views/shoppinglistform.blade.php
+++ b/views/shoppinglistform.blade.php
@ -10,7 +10,7 @@

@section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4">
+	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h1>@yield('title')</h1>

 		<script>Grocy.EditMode = '{{ $mode }}';</script>
@ -32,7 +32,7 @@
 			</div>

 			<div class="form-group">
-				<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span><br><span class="small text-warning">@if($mode == 'edit' && $listItem->amount_autoadded > 0){{ $L('#1 units were automatically added and will apply in addition to the amount entered here', $listItem->amount_autoadded) }}@endif</span></label>
+				<label for="amount">{{ $L('Amount') }}&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span><br><span class="small text-muted">@if($mode == 'edit' && $listItem->amount_autoadded > 0){{ $L('#1 units were automatically added and will apply in addition to the amount entered here', $listItem->amount_autoadded) }}@endif</span></label>
 				<input type="number" class="form-control" id="amount" name="amount" value="@if($mode == 'edit'){{ $listItem->amount }}@else{{1}}@endif" min="0" required>
 				<div class="invalid-feedback">{{ $L('This cannot be negative') }}</div>
 			</div>
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@ -20,7 +20,7 @@

 <div class="row mt-3">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="location-filter"><i class="fas fa-filter"></i> {{ $L('Filter by location') }}</label>
+		<label for="location-filter">{{ $L('Filter by location') }}</label> <i class="fas fa-filter"></i>
 		<select class="form-control" id="location-filter">
 			<option value="all">{{ $L('All') }}</option>
 			@foreach($locations as $location)
@ -29,7 +29,7 @@
 		</select>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="search"><i class="fas fa-search"></i> {{ $L('Search') }}</label>
+		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
 	</div>
 </div>
--- a/yarn.lock
+++ b/yarn.lock
@ -20,12 +20,6 @@
  version "5.0.0"
  resolved "https://github.com/makeusabrew/bootbox.git#8d843602d6ba7a2367829e01feee399d5f0a3a07"

-bootstrap-datepicker@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/bootstrap-datepicker/-/bootstrap-datepicker-1.8.0.tgz#c63513931e6f09f16ae9f11b62f32d950df3958e"
-  dependencies:
-    jquery ">=1.7.1 <4.0.0"
-
 "bootstrap-side-navbar@https://github.com/samrayner/bootstrap-side-navbar.git#1.0.1":
  version "0.0.0"
  resolved "https://github.com/samrayner/bootstrap-side-navbar.git#bda4883fd2b278df3a48db4add7dc4d994477734"
@ -127,7 +121,7 @@ jquery@1:
  version "1.12.4"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-1.12.4.tgz#01e1dfba290fe73deba77ceeacb0f9ba2fec9e0c"

-jquery@3.3.1, jquery@>=1.12.0, jquery@>=1.2.3, jquery@>=1.7, "jquery@>=1.7.1 <4.0.0", jquery@^3.0, jquery@^3.3.1:
+jquery@3.3.1, jquery@>=1.12.0, jquery@>=1.2.3, jquery@>=1.7, jquery@^3.0, jquery@^3.3.1:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"