Bismeldestichtag gui: added vue date picker

application/views/codex/bismeldestichtag.php

@@ -8,12 +8,13 @@
 		'filtercomponent' => true,
 		'navigationcomponent' => true,
 		'tabulator5' => true,
+		'customCSSs' => array('vendor/vuejs/vuedatepicker_css/main.css'),
+		'customJSs' => array('vendor/vuejs/vuedatepicker_js/vue-datepicker.iife.js'),
 		'customJSModules' => array('public/js/apps/Bismeldestichtag/Bismeldestichtag.js')
 	);
 
 	$this->load->view('templates/FHC-Header', $includesArray);
 ?>
-	<!-- Load Studiensemester -->
 	<div id="main">
 
 		<!-- Navigation component -->
@@ -30,26 +31,32 @@
 		<div id="content">
 			<!-- input fields -->
 			<div class="row">
-				<div class="col-12">
-					<div class="input-group">
-						<input type="date" class="form-control" name="meldestichtag" v-model="meldestichtag">
-						<select class="form-select" name="studiensemester_kurzbz" v-model="currSem">
-							<option v-for="sem in semList" :value="sem.studiensemester_kurzbz">
-								{{ sem.studiensemester_kurzbz }}
-							</option>
-						</select>
-						<div class="input-group-btn">
-							<button type="button" class="btn btn-primary" @click="handlerAddBismeldestichtag">
-								<?php echo $this->p->t('bismeldestichtag', 'stichtagHinzufuegen') ?>
-							</button>
-						</div>
-					</div>
+				<div class="col-5">
+					<datepicker v-model="meldestichtag"
+						v-bind:enable-time-picker="false"
+						v-bind:placeholder="'Meldestichtag'"
+						locale="de"
+						format="dd.MM.yyyy"
+						model-type="yyyy-MM-dd">
+					</datepicker>
+				</div>
+				<div class="col-4">
+					<select class="form-select" name="studiensemester_kurzbz" v-model="currSem">
+						<option v-for="sem in semList" :value="sem.studiensemester_kurzbz">
+							{{ sem.studiensemester_kurzbz }}
+						</option>
+					</select>
+				</div>
+				<div class="col-3">
+					<button type="button" class="btn btn-primary" @click="handlerAddBismeldestichtag">
+						<?php echo $this->p->t('bismeldestichtag', 'stichtagHinzufuegen') ?>
+					</button>
 				</div>
 			</div>
 			<br />
 			<!-- Filter component -->
 			<div class="row">
-				<div class="col-12">
+				<div class="col">
 					<core-filter-cmpt
 						title="<?php echo $this->p->t('bismeldestichtag', 'stichtageVerwalten') ?>"
 						ref="bismeldestichtageTable"

composer.json

@@ -348,6 +348,28 @@
 				}
 			}
 		},
+		{
+			"type": "package",
+			"package": {
+					"name": "vuejs/vuedatepicker_js",
+					"version": "4.2.3",
+					"dist": {
+							"url": "https://unpkg.com/@vuepic/vue-datepicker@4.2.3/dist/vue-datepicker.iife.js",
+							"type": "file"
+					}
+			}
+		},
+		{
+			"type": "package",
+			"package": {
+					"name": "vuejs/vuedatepicker_css",
+					"version": "4.2.3",
+					"dist": {
+							"url": "https://unpkg.com/@vuepic/vue-datepicker@4.2.3/dist/main.css",
+							"type": "file"
+					}
+			}
+		},
 		{
 			"type": "composer",
 			"url": "https://asset-packagist.org"

public/js/apps/Bismeldestichtag/Bismeldestichtag.js

@@ -42,7 +42,8 @@ const bismeldestichtagApp = Vue.createApp({
 		CoreNavigationCmpt,
 		CoreFilterCmpt,
 		BismeldestichtagAPIs,
-		CoreFetchCmpt
+		CoreFetchCmpt,
+		"datepicker": VueDatePicker
 	},
 	created() {
 		this.handlerStudiensemester();