WIP Добавила date picker

src/components/base/BaseInput.vue

@@ -31,7 +31,9 @@
     )
       template(v-slot:prepend, v-if="iconLeft")
         slot
-      slot.cursor-pointer(v-if="!iconLeft")
+      template(v-slot:append, v-if="iconRight")
+        slot
+      slot.cursor-pointer(v-if="!iconLeft && !iconRight")
 </template>
 
 <script>
@@ -112,6 +114,7 @@ export default {
     label: String,
     readonly: Boolean,
     iconLeft: Boolean,
+    iconRight: Boolean,
     name: String,
   },
   emits: ["update:modelValue"],

src/pages/newCalendar/components/CalendarHeader.vue

@@ -23,9 +23,23 @@
         outlined,
         :width="300",
         fontSize="16px",
-        lineHeight="19px"
+        lineHeight="19px",
+        iconRight
       )
         q-icon.text(name="app:calendar", size="20px")
+          q-popup-proxy(
+            cover,
+            transition-show="scale",
+            transition-hide="scale"
+          )
+              q-date(v-model="date", minimal)
+                .flex.items-center.justify-end
+                  q-btn(
+                    v-close-popup,
+                    label="Закрыть",
+                    color="primary",
+                    flat
+                  )
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",
@@ -34,7 +48,7 @@
         text-color="primary",
         dense
       ) 
-    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color
+    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
       q-btn-toggle(
         v-model="displayType",
         :options="displayTypesList",
@@ -46,6 +60,7 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
+import * as moment from "moment/moment";
 export default {
   name: "CalendarHeader",
   components: { BaseInput },
@@ -62,6 +77,7 @@ export default {
           value: "expanded",
         },
       ],
+      date: moment(),
     };
   },
 };