save

public/style.css

@@ -1,5 +1,8 @@
 .card {
     width: 20rem;
-    top: 50px;
     left: 225px;
+}
+.col1 {
+    background-image: url(assets/objednavka.png);
+    background-color: #cccccc;
 }

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <h1 style="text-align: center;">Letenka</h1>
     <div class="wrapper">
-      <div class="col">
+      <div class="col1">
         <div class="card">
           <div class="card-body">
             <h4 class="card-title">Parametry letu</h4>
@@ -30,11 +30,13 @@
                 </select>
               </p>
             </div>
-            <div>
-              <p>
-                Datum odletu: 
-                <v-date-picker v-model="departureDate" :min-date="new Date()" value="" />
-              </p>
+            <div v-if="travelType.value == 'O'">
+              <label for="inputdeparatureDate">vyberte datum odletu: </label>
+              <v-date-picker v-model="deparatureDate" :min-date="new Date()" id="inputdeperatureDate" />
+            </div>
+            <div v-else>
+              <label for="inputdeparatureRangeDate">vyberte datum odletu: </label>
+              <v-date-picker v-model="deparatureRangeDate" :min-date="new Date()" is-range id="inputdeperatureRangeDate" />
             </div>
             <div>
               <p>
@@ -60,7 +62,7 @@
         
         
 
-      <div class="col">
+      <div class="col2">
         <div class="card">
           <div class="card-body">
             <h4 class="card-title">Objednavka</h4>
@@ -77,7 +79,11 @@
             </p>
             <p>
               Datum odletu: 
-              {{ departureDate.getDate() }}. {{ departureDate.getMonth() + 1 }}. {{ departureDate.getFullYear() }}
+              {{ departureDate.start }}
+            </p>
+            <p>
+              Datum příletu: 
+              <span style="text-transform: uppercase;">{{ deparatureRangeDate.end }}</span>
             </p>
             <p>
               Počet cestujcích: {{ personCount }}
@@ -130,6 +136,11 @@ export default {
       chosenSeats: [],
 
       departureDate: new Date(),
+      deparatureRangeDate: {
+        start: new Date(),
+        end: new Date(),
+      },
+
     }
   },
   methods: {
@@ -148,7 +159,7 @@ export default {
         this.chosenSeats.pop();
           
       }
-    }
+    },
   }
 }
 </script>