use datepicker

package.json

@@ -29,6 +29,7 @@
     "dependencies": {
         "vue-multiselect": "^3.0.0-alpha.2",
         "vue-unicons": "^3.2.1",
+        "vue3-datepicker": "^0.2.4",
         "vuex": "^4.0.0"
     }
 }

resources/js/Pages/Cars/Components/CarForm.vue

@@ -54,6 +54,8 @@ export default {
     },
     methods: {
         submitForm() {
+            this.form.initial_date = this.form.initial_date.toISOString().split("T")[0];
+            this.form.last_check_date = this.form.last_check_date.toISOString().split("T")[0];
             this.form.submit(this.meta.method, this.meta.route);
         },
     }

resources/js/Pages/Cars/Components/CarFormFields.vue

@@ -41,13 +41,13 @@
         <div class="grid grid-cols-12 gap-6">
             <div class="col-span-6 sm:col-span-6">
                 <jet-label for="initial_date" value="Inverkehrssetzung" />
-                <jet-input id="initial_date" type="text" class="mt-1 block w-full" v-model="form.initial_date" ref="initial_date" autocomplete="initial_date" />
+                <datepicker id="initial_date" ref="initial_date" v-model="form.initial_date" inputFormat="dd.MM.yyyy" class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full" />
                 <jet-input-error :message="form.errors.initial_date" class="mt-2" />
             </div>
 
             <div class="col-span-6 sm:col-span-6">
                 <jet-label for="last_check_date" value="Letzte Prüfung" />
-                <jet-input id="last_check_date" type="text" class="mt-1 block w-full" v-model="form.last_check_date" ref="last_check_date" autocomplete="last_check_date" />
+                <datepicker id="last_check_date" ref="last_check_date" v-model="form.last_check_date" inputFormat="dd.MM.yyyy" class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full" />
                 <jet-input-error :message="form.errors.last_check_date" class="mt-2" />
             </div>
         </div>
@@ -86,6 +86,7 @@ import JetInput from '@/Jetstream/Input.vue'
 import JetActionMessage from '@/Jetstream/ActionMessage'
 import JetInputError from '@/Jetstream/InputError'
 import Multiselect from 'vue-multiselect'
+import Datepicker from 'vue3-datepicker'
 
 export default {
     components: {
@@ -94,6 +95,7 @@ export default {
         JetInputError,
         JetActionMessage,
         Multiselect,
+        Datepicker,
     },
     props: {
         form: Object,

resources/js/Pages/Cars/Create.vue

@@ -20,6 +20,7 @@
 import Layout from '@/Layouts/Layout'
 import BreadCrumb from '@/Components/BreadCrumb.vue'
 import CarForm from './Components/CarForm.vue'
+import { ref } from 'vue'
 
 export default {
     components: {
@@ -45,8 +46,8 @@ export default {
                 vin: null,
                 colour: null,
                 car_model_id: null,
-                initial_date: null,
+                initial_date: ref(new Date()),
-                last_check_date: null,
+                last_check_date: ref(new Date()),
                 kilometers: null,
                 known_damage: null,
                 notes: null,

resources/js/Pages/Cars/Edit.vue

@@ -22,7 +22,7 @@
 import Layout from '@/Layouts/Layout'
 import BreadCrumb from '@/Components/BreadCrumb.vue'
 import CarForm from './Components/CarForm.vue'
-
+import { ref } from 'vue'
 
 export default {
     components: {
@@ -62,11 +62,11 @@ export default {
                 id: this.car.id,
                 stammnummer: this.car.stammnummer,
                 vin: this.car.vin,
-                initial_date: this.car.initial_date,
+                initial_date: ref(Date.parse(this.car.initial_date)),
                 colour: this.car.colour,
                 notes: this.car.notes,
                 car_model_id: this.car.car_model.id,
-                last_check_date: this.car.last_check_date,
+                last_check_date: ref(Date.parse(this.car.last_check_date)),
                 kilometers: this.car.kilometers,
                 known_damage: this.car.known_damage,
                 notes: this.car.notes,

resources/js/Pages/Contacts/Create.vue

@@ -46,7 +46,7 @@ export default {
                 address: null,
                 zip: null,
                 city: null,
-                country: null,
+                country: 'CH',
                 notes: null,
             },
         }

resources/js/Pages/Contracts/Components/ContractForm.vue

@@ -13,7 +13,7 @@
                 <div class="col-span-3 grid grid-cols-6 gap-3">
                     <div class="col-span-6 sm:col-span-4">
                         <jet-label for="date" value="Datum" />
-                        <jet-input id="date" type="text" class="mt-1 block w-full" v-model="form.date" ref="date" autocomplete="date" />
+                        <datepicker id="date" ref="date" v-model="form.date" inputFormat="dd.MM.yyyy" class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full" />
                         <jet-input-error :message="form.errors.date" class="mt-2" />
                     </div>
 
@@ -53,6 +53,7 @@ import JetActionMessage from '@/Jetstream/ActionMessage'
 import JetInputError from '@/Jetstream/InputError'
 import JetFormSection from '@/Jetstream/FormSection'
 import Multiselect from 'vue-multiselect'
+import Datepicker from 'vue3-datepicker'
 import { useForm } from '@inertiajs/inertia-vue3'
 
 export default {
@@ -64,6 +65,7 @@ export default {
         JetInputError,
         JetActionMessage,
         Multiselect,
+        Datepicker,
     },
     props: {
         data: Object,
@@ -87,6 +89,7 @@ export default {
     },
     methods: {
         submitForm() {
+            this.form.date = this.form.date.toISOString().split("T")[0];
             this.form.submit(this.meta.method, this.meta.route);
         },
         updateInsuranceSelection(selection) {

resources/js/Pages/Contracts/Create.vue

@@ -60,6 +60,7 @@ import ContractForm from './Components/ContractForm.vue'
 import CarCard from '@/Components/CarCard.vue'
 import ContactCard from '@/Components/ContactCard.vue'
 import JetFormSection from '@/Jetstream/FormSection'
+import { ref } from 'vue'
 
 export default {
     components: {
@@ -87,7 +88,7 @@ export default {
             },
             data: {
                 id: null,
-                date: null,
+                date: ref(new Date()),
                 price: null,
                 type: this.type == "SellContract" ? 0 : 1,
                 insurance_type: '0',

resources/js/Pages/Contracts/Edit.vue

@@ -9,7 +9,7 @@
             </h2>
         </template>
         <div>
-            <contract-form :data="contract" :insurance_types="insurance_types" :meta="meta">
+            <contract-form :data="data" :insurance_types="insurance_types" :meta="meta">
                 <template #title>Vertragsangaben</template>
                 <template #description>
                     Vertrag &amp; anpassen.
@@ -23,7 +23,7 @@
 import Layout from '@/Layouts/Layout'
 import BreadCrumb from '@/Components/BreadCrumb.vue'
 import ContractForm from './Components/ContractForm.vue'
-
+import { ref } from 'vue'
 
 export default {
     components: {
@@ -45,6 +45,11 @@ export default {
                 button_text: 'Änderungen speichern',
                 on_success: 'Änderungen gespeichert',
             },
+            data: {
+                date: ref(Date.parse(this.contract.date)),
+                price: this.contract.price,
+                insurance_type: this.contract.insurance_type,
+            }
         }
     },
 }

resources/js/app.js

@@ -10,7 +10,6 @@ import { uniPalette, uniCalendarAlt, uniPlusCircle, uniMeh, uniUsersAlt, uniCarS
 
 Unicon.add([uniPalette, uniCalendarAlt, uniPlusCircle, uniMeh, uniUsersAlt, uniCarSideview, uniDashboard, uniSearch, uniFilter, uniFilterSlash, uniTrashAlt, uniPen, uniExclamationTriangle, uniMapMarker, uniPhone, uniEnvelope, uniFileDownload, uniArrowDown, uniArrowUp, uniArrowRight, uniAngleRight, uniAngleUp, uniAngleDown, uniAngleLeft, uniFileUploadAlt])
 
-
 // Create a new store instance.
 const store = createStore({
     state () {