konec

package-lock.json

@@ -4001,6 +4001,16 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.17.0.tgz",
+      "integrity": "sha512-ZEhqxUtEZeGgg9eHNSOAJ8O9xqSgiJdrL0lzSSfMF54x6KXWJiOH/xntSJ9YomJPrYH/p08t6gWjGWq1SDJlSA=="
+    },
+    "date-fns-tz": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.1.1.tgz",
+      "integrity": "sha512-5PR604TlyvpiNXtvn+PZCcCazsI8fI1am3/aimNFN8CMqHQ0KRl+6hB46y4mDbB7bk3+caEx3qHhS7Ewac/FIg=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -6924,8 +6934,7 @@
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
-      "dev": true
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -10798,6 +10807,17 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-calendar": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-2.2.3.tgz",
+      "integrity": "sha512-E4dByu3vDYtleIsZcciUJANpKn6zI0DCXzRsm6g3VsfV7Wpr49t+OQrrc6zVFtISardEUCabivzJOJ0NVdga/Q==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "date-fns": "^2.8.1",
+        "date-fns-tz": "^1.0.12",
+        "lodash": "4.17.20"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "v-calendar": "^2.2.3",
     "vue": "^2.6.11"
   },
   "devDependencies": {

src/App.vue

@@ -1,4 +1,4 @@
-    <template>
+<template>
     <div id="app">
         <h1>Letenka</h1>
         <div class="wrapper">
@@ -6,6 +6,7 @@
                 <h2>Parametry letu</h2>
                 <form action="">
                     <p>
+                        <label for="">Třída: </label>
                         <select v-model="travelType">
                             <option value="" disabled>Vyberte jednu možnost</option>
                             <option v-for="(option, index) in travelTypes" :key="index" :value="option">
@@ -15,8 +16,22 @@
                     </p>
                     
                     <!-- volba destinace -->
+                    <p>
+                        <label for="">Destinace: </label>
+                        <select v-model="travelDest">
+                            <option value="" disabled>Vyberte jednu možnost</option>
+                            <option v-for="(option, index) in travelDests" :key="index" :value="option">
+                                 {{ option.text }}
+                            </option>
+                        </select>
+                    </p>
                     <!-- datum odletu -->
-                        <input type="date">
+                    <div v-if="travelType.value == 'R'">
+                        <v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" is-range/>
+                    </div>
+                    <div v-else>
+                        <v-date-picker v-model="departureDate" :min-date="new Date()" />
+                    </div>
                     <!-- datum příletu pokud zpáteční -->
 
 
@@ -54,20 +69,30 @@
                 </form>
 
             </div>
+            <div>
                 <div class="col order">
                 <h2>Objednávka</h2>
                 <p v-if="travelType">
                     Typ cesty: 
-                        <span style="text-transform: lowercase">
+                    <span>
                         {{ travelType.text }}
                     </span>
                 </p>
                 <p>
-                        Počet cestujích: {{ personCount}}
+                    Počet cestujích: {{ personCount }}
+                </p>
+                <p v-if="travelDest">
+                    Destinace: {{ travelDest.text }}
+                </p>
+                <p v-if="travelType.value == 'R'">
+                    Datum odletu:
+                    {{  departureRangeDate.start }} <br>
+                    Datum příletu:
+                    {{  departureRangeDate.end }}
                 </p>
                 <p v-if="classType">
                     Třída: 
-                        <span style="text-transform: lowercase">
+                    <span>
                         {{ classType.text }}
                     </span>
                 </p>
@@ -78,22 +103,32 @@
                         {{ seat }}
                     </div>
                 </div>
-
             </div>
             </div>
         </div>
-    </template>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import VCalendar from 'v-calendar';
+
+// Use v-calendar & v-date-picker components
+Vue.use(VCalendar, {});
+
 
-    <script>
 
-    export default {
+export default {
     name: 'App',
     data: function() {
+        const date = new Date();
+        const year = date.getFullYear();
+        const month = date.getMonth();
         return {
             travelType: "",
             travelTypes: [
-                  { value: "R", text: "Zpáteční" },
-                  { value: "O", text: "Jednosměrná" },
+                { value: "R", text: "TwoWay" },
+                { value: "O", text: "OneWay" },
             ],
             personCount: 1,
             classType: "",
@@ -105,7 +140,19 @@
                 "B1", "B2", "B3", 
                 "E1", "E2", "E3", "E4", "E5"
             ],
-              chosenSeats: []
+            chosenSeats: [],
+            travelDest: "",
+            travelDests:[
+                { value:"Pg", text:"Prague"},
+                { value:"Ps", text:"Paris"},
+                { value:"LA", text:"Los Angeles"},
+                { value:"Pe", text:"Peking"},
+                { value:"T", text:"Tokio"},
+            ],
+            departureDate: new Date(year, month, 12),
+            departureRangeDate: {
+                start: new Date(year, month, 12)
+            },
         }
     },
     methods: {
@@ -125,11 +172,12 @@
             }
         }
     }
-    }
-    </script>
+}
+</script>
 
-    <style>
+<style>
     .wrapper {
+    background-color: lightgreen;
     display: grid;
     grid-template-columns: 1fr 1fr;
     }
@@ -160,4 +208,4 @@
         background-color: lightgreen;
     }
 
-    </style>
+</style>