diff --git a/public/viewjs/components/datepicker.js b/public/viewjs/components/datepicker.js
new file mode 100644
index 00000000..0b62cf66
--- /dev/null
+++ b/public/viewjs/components/datepicker.js
@@ -0,0 +1,91 @@
+$(function()
+{
+	$('.datepicker').datepicker(
+	{
+		format: 'yyyy-mm-dd',
+		startDate: '+0d',
+		todayHighlight: true,
+		autoclose: true,
+		calendarWeeks: true,
+		orientation: 'bottom auto',
+		weekStart: 1,
+		showOnFocus: false
+	});
+	$('.datepicker').trigger('change');
+
+	EmptyElementWhenMatches('#datepicker-timeago', 'NaN years ago');
+});
+
+$('.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', 'NaN years ago');
+});
+
+$('#datepicker-button').on('click', function(e)
+{
+	$('.datepicker').datepicker('show');
+});
diff --git a/public/viewjs/components/datetimepicker.js b/public/viewjs/components/datetimepicker.js
new file mode 100644
index 00000000..303dc964
--- /dev/null
+++ b/public/viewjs/components/datetimepicker.js
@@ -0,0 +1,10 @@
+$(function()
+{
+	$('.datetimepicker').datetimepicker(
+	{
+		format: 'YYYY-MM-DD HH:mm:ss',
+		showTodayButton: true,
+		calendarWeeks: true,
+		maxDate: moment()
+	});
+});
diff --git a/public/viewjs/habittracking.js b/public/viewjs/habittracking.js
index 2e44208f..696314eb 100644
--- a/public/viewjs/habittracking.js
+++ b/public/viewjs/habittracking.js
@@ -7,7 +7,7 @@
 	Grocy.FetchJson('/api/habits/get-habit-details/' + jsonForm.habit_id,
 		function (habitDetails)
 		{
-			Grocy.FetchJson('/api/habits/track-habit-exeuction/' + jsonForm.habit_id + '?tracked_time=' + $('#tracked_time').val(),
+			Grocy.FetchJson('/api/habits/track-habit-execution/' + jsonForm.habit_id + '?tracked_time=' + $('#tracked_time').val(),
 				function(result)
 				{
 					toastr.success('Tracked execution of habit ' + habitDetails.habit.name + ' on ' + $('#tracked_time').val());
@@ -46,14 +46,6 @@ $('#habit_id').on('change', function(e)
 
 $(function()
 {
-	$('.datetimepicker').datetimepicker(
-	{
-		format: 'YYYY-MM-DD HH:mm:ss',
-		showTodayButton: true,
-		calendarWeeks: true,
-		maxDate: moment()
-	});
-
 	$('#tracked_time').val(moment().format('YYYY-MM-DD HH:mm:ss'));
 	$('#tracked_time').trigger('change');
 
@@ -90,63 +82,7 @@ $(function()
 	});
 });
 
-$('#tracked_time').on('change', function(e)
-{
-	var value = $('#tracked_time').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');
-		$('#tracked_time').val(value);
-		$('#habittracking-form').validator('validate');
-	}
-});
-
 $('#tracked_time').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'));
-		}
-	}
-
 	$('#habittracking-form').validator('validate');
 });
diff --git a/public/viewjs/inventory.js b/public/viewjs/inventory.js
index d0e47fbc..5c9782b9 100644
--- a/public/viewjs/inventory.js
+++ b/public/viewjs/inventory.js
@@ -89,19 +89,6 @@ $('#product_id').on('change', function(e)
 
 $(function()
 {
-	$('.datepicker').datepicker(
-	{
-		format: 'yyyy-mm-dd',
-		startDate: '+0d',
-		todayHighlight: true,
-		autoclose: true,
-		calendarWeeks: true,
-		orientation: 'bottom auto',
-		weekStart: 1,
-		showOnFocus: false
-	});
-	$('.datepicker').trigger('change');
-
 	$('.combobox').combobox({
 		appendId: '_text_input'
 	});
@@ -263,11 +250,6 @@ $(function()
 	}
 });
 
-$('#best_before_date-datepicker-button').on('click', function(e)
-{
-	$('.datepicker').datepicker('show');
-});
-
 $('#new_amount').on('keypress', function(e)
 {
 	$('#new_amount').trigger('change');
@@ -275,63 +257,11 @@ $('#new_amount').on('keypress', function(e)
 	
 $('#best_before_date').on('change', function(e)
 {
-	var value = $('#best_before_date').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');
-		$('#best_before_date').val(value);
-		$('#inventory-form').validator('validate');
-	}
+	$('#inventory-form').validator('validate');
 });
 
 $('#best_before_date').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'));
-		}
-	}
-
 	$('#inventory-form').validator('validate');
 });
 
diff --git a/public/viewjs/purchase.js b/public/viewjs/purchase.js
index 6d78ef75..cfd9c418 100644
--- a/public/viewjs/purchase.js
+++ b/public/viewjs/purchase.js
@@ -98,19 +98,6 @@ $('#product_id').on('change', function(e)
 
 $(function()
 {
-	$('.datepicker').datepicker(
-	{
-		format: 'yyyy-mm-dd',
-		startDate: '+0d',
-		todayHighlight: true,
-		autoclose: true,
-		calendarWeeks: true,
-		orientation: 'bottom auto',
-		weekStart: 1,
-		showOnFocus: false
-	});
-	$('.datepicker').trigger('change');
-
 	$('.combobox').combobox({
 		appendId: '_text_input'
 	});
@@ -271,83 +258,14 @@ $(function()
 		$('#flow-info-addbarcodetoselection').removeClass('hide');
 		$('#barcode-lookup-disabled-hint').removeClass('hide');
 	}
-
-	EmptyElementWhenMatches('#best-before-timeago', 'NaN years ago');
-});
-
-$('#best_before_date-datepicker-button').on('click', function(e)
-{
-	$('.datepicker').datepicker('show');
 });
 
 $('#best_before_date').on('change', function(e)
 {
-	var value = $('#best_before_date').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');
-		$('#best_before_date').val(value);
-		$('#purchase-form').validator('validate');
-	}
-
-	$('#best-before-timeago').text($.timeago($('#best_before_date').val()));
-	EmptyElementWhenMatches('#best-before-timeago', 'NaN years ago');
+	$('#purchase-form').validator('validate');
 });
 
-$('#best_before_date').on('keydown', function(e)
-{
-	if (e.keyCode === 13) //Enter
-	{
-		$('#best_before_date').trigger('change');
-	}
-});	
-
 $('#best_before_date').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'));
-		}
-	}
-
 	$('#purchase-form').validator('validate');
 });
diff --git a/views/components/batterycard.blade.php b/views/components/batterycard.blade.php
index 4a0c7275..37aa345d 100644
--- a/views/components/batterycard.blade.php
+++ b/views/components/batterycard.blade.php
@@ -1,8 +1,7 @@
-@extends('layout.basecomponent')
+@push('componentScripts')
+	<script src="/viewjs/components/batterycard.js"></script>
+@endpush
 
-@section('componentJsName', 'batterycard')
-
-@section('componentContent')
 <div class="main well">
 
 	<h3>Battery overview <strong><span id="batterycard-battery-name"></span></strong></h3>
@@ -13,4 +12,3 @@
 	</p>
 	
 </div>
-@stop
diff --git a/views/components/datepicker.blade.php b/views/components/datepicker.blade.php
new file mode 100644
index 00000000..c973b547
--- /dev/null
+++ b/views/components/datepicker.blade.php
@@ -0,0 +1,14 @@
+@push('componentScripts')
+	<script src="/viewjs/components/datepicker.js"></script>
+@endpush
+
+<div class="form-group">
+	<label for="{{ $id }}">{!! $label !!}&nbsp;&nbsp;<span class="small text-muted"><time id="datepicker-timeago" class="timeago timeago-contextual"></time></span></label>
+	<div class="input-group date">
+		<input type="text" data-isodate="isodate" class="form-control datepicker" id="{{ $id }}" name="{{ $id }}" required autocomplete="off">
+		<div id="datepicker-button" class="input-group-addon">
+			<i class="fa fa-calendar"></i>
+		</div>
+	</div>
+	<div class="help-block with-errors"></div>
+</div>
diff --git a/views/components/datetimepicker.blade.php b/views/components/datetimepicker.blade.php
new file mode 100644
index 00000000..8dbc5b59
--- /dev/null
+++ b/views/components/datetimepicker.blade.php
@@ -0,0 +1,14 @@
+@push('componentScripts')
+	<script src="/viewjs/components/datetimepicker.js"></script>
+@endpush
+
+<div class="form-group">
+<label for="{{ $id }}">{{ $label }}</label>
+	<div class="input-group date datetimepicker">
+		<input type="text" class="form-control" id="{{ $id }}" name="{{ $id }}" required>
+		<span class="input-group-addon">
+			<span class="fa fa-calendar"></span>
+		</span>
+	</div>
+	<div class="help-block with-errors"></div>
+</div>
diff --git a/views/components/habitcard.blade.php b/views/components/habitcard.blade.php
index 113d9707..9a650d87 100644
--- a/views/components/habitcard.blade.php
+++ b/views/components/habitcard.blade.php
@@ -1,8 +1,7 @@
-@extends('layout.basecomponent')
+@push('componentScripts')
+	<script src="/viewjs/components/habitcard.js"></script>
+@endpush
 
-@section('componentJsName', 'habitcard')
-
-@section('componentContent')
 <div class="main well">
 
 	<h3>Habit overview <strong><span id="habitcard-habit-name"></span></strong></h3>
@@ -13,4 +12,3 @@
 	</p>
 	
 </div>
-@stop
diff --git a/views/components/productcard.blade.php b/views/components/productcard.blade.php
index 6cd2f0d2..752fa67c 100644
--- a/views/components/productcard.blade.php
+++ b/views/components/productcard.blade.php
@@ -1,8 +1,7 @@
-@extends('layout.basecomponent')
+@push('componentScripts')
+	<script src="/viewjs/components/productcard.js"></script>
+@endpush
 
-@section('componentJsName', 'productcard')
-
-@section('componentContent')
 <div class="main well">
 
 	<h3>Product overview <strong><span id="productcard-product-name"></span></strong></h3>
@@ -15,4 +14,3 @@
 	</p>
 	
 </div>
-@stop
diff --git a/views/habittracking.blade.php b/views/habittracking.blade.php
index e036e3ea..923409e0 100644
--- a/views/habittracking.blade.php
+++ b/views/habittracking.blade.php
@@ -22,16 +22,10 @@
 			<div id="product-error" class="help-block with-errors"></div>
 		</div>
 
-		<div class="form-group">
-			<label for="tracked_time">Tracked time</label>
-			<div class="input-group date datetimepicker">
-				<input type="text" class="form-control" id="tracked_time" name="tracked_time" required >
-				<span class="input-group-addon">
-					<span class="fa fa-calendar"></span>
-				</span>
-			</div>
-			<div class="help-block with-errors"></div>
-		</div>
+		@include('components.datetimepicker', array(
+			'id' => 'tracked_time',
+			'label' => 'Tracked time'
+		))
 
 		<button id="save-habittracking-button" type="submit" class="btn btn-default">OK</button>
 
diff --git a/views/inventory.blade.php b/views/inventory.blade.php
index 3564ab6d..9a60fde0 100644
--- a/views/inventory.blade.php
+++ b/views/inventory.blade.php
@@ -30,16 +30,10 @@
 			<div id="inventory-change-info" class="help-block text-muted"></div>
 		</div>
 
-		<div class="form-group">
-			<label for="best_before_date">Best before&nbsp;&nbsp;<span class="small text-muted">This will apply to added products</span></label>
-			<div class="input-group date">
-				<input type="text" data-isodate="isodate" class="form-control datepicker" id="best_before_date" name="best_before_date" autocomplete="off">
-				<div id="best_before_date-datepicker-button" class="input-group-addon">
-					<i class="fa fa-calendar"></i>
-				</div>
-			</div>
-			<div class="help-block with-errors"></div>
-		</div>
+		@include('components.datepicker', array(
+			'id' => 'best_before_date',
+			'label' => 'Best before&nbsp;&nbsp;<span class="small text-muted">This will apply to added products</span>'
+		))
 
 		<button id="save-inventory-button" type="submit" class="btn btn-default">OK</button>
 
diff --git a/views/layout/basecomponent.blade.php b/views/layout/basecomponent.blade.php
deleted file mode 100644
index 89fe8013..00000000
--- a/views/layout/basecomponent.blade.php
+++ /dev/null
@@ -1,6 +0,0 @@
-@section('componentContent')
-@show
-
-@push('componentScripts')
-	<script src="/viewjs/components/@yield('componentJsName').js"></script>
-@endpush
diff --git a/views/layout/default.blade.php b/views/layout/default.blade.php
index b41398ce..0502b084 100644
--- a/views/layout/default.blade.php
+++ b/views/layout/default.blade.php
@@ -206,8 +206,7 @@
 
 			</div>
 
-			@section('content')
-			@show
+			@yield('content')
 
 		</div>
 	</div>
diff --git a/views/purchase.blade.php b/views/purchase.blade.php
index 9e64d4a6..436bff61 100644
--- a/views/purchase.blade.php
+++ b/views/purchase.blade.php
@@ -23,16 +23,10 @@
 			<div id="flow-info-addbarcodetoselection" class="text-muted small hide"><strong><span id="addbarcodetoselection"></span></strong> will be added to the list of barcodes for the selected product on submit.</div>
 		</div>
 
-		<div class="form-group">
-			<label for="best_before_date">Best before&nbsp;&nbsp;<span class="small text-muted"><time id="best-before-timeago" class="timeago timeago-contextual"></time></span></label>
-			<div class="input-group date">
-				<input type="text" data-isodate="isodate" class="form-control datepicker" id="best_before_date" name="best_before_date" required autocomplete="off">
-				<div id="best_before_date-datepicker-button" class="input-group-addon">
-					<i class="fa fa-calendar"></i>
-				</div>
-			</div>
-			<div class="help-block with-errors"></div>
-		</div>
+		@include('components.datepicker', array(
+			'id' => 'best_before_date',
+			'label' => 'Best before'
+		))
 
 		<div class="form-group">
 			<label for="amount">Amount&nbsp;&nbsp;<span id="amount_qu_unit" class="small text-muted"></span></label>