only improves

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -35,15 +35,10 @@
       .flex.gap-x-3.items-center
         .text.font-semibold Время:
         .flex.gap-x-1
-          .input.flex.items-center.pl-4.rounded-md
-            .dark-blue.font-medium 13:00 - 14:00
-          q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
-            q-icon.icon(name="app:time", size="20px")
-          base-modal(v-model="isShowTime", title="Время", modal-padding)
-            base-time-modal(:times="times", :close-modal-time="closeModalTime", :data="data")
+          base-input.input.no-border(size="XS", mask="##:## - ##:##")
     .flex.h-14.gap-x-3.items-center.text-smm
       .text.font-semibold Медкарта:
-      .flex.gap-x-1 
+      .flex.gap-x-1
         .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
           .photo.flex.h-10.w-10.items-center.justify-center
             img.w-10.h-10.rounded-full(v-if="patient", :src="patient.avatar")
@@ -71,10 +66,17 @@ import MedcardsModal from "./MedcardsModal.vue";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import * as moment from "moment/moment";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "HeaderRecordForm",
-  components: { BaseCalendar, BaseModal, BaseTimeModal, MedcardsModal },
+  components: {
+    BaseInput,
+    BaseCalendar,
+    BaseModal,
+    BaseTimeModal,
+    MedcardsModal,
+  },
   props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
   data() {
     return {
@@ -83,7 +85,7 @@ export default {
       isShowTime: false,
       isShowMedcards: false,
       patients: patientList.find(({ id }) => id === 2).data,
-      times: { from: "8:30", to: "10:30" },
+      times: { from: "08:30", to: "10:30" },
       data: [
         {
           start: "8:00",
@@ -109,6 +111,18 @@ export default {
       this.isShowMedcards = false;
       this.patient = medcard;
     },
+    // validateTimeString(value = "") {
+    //   const [start = "", end = ""] = value.split(" - ");
+    //   this.validateTime(start);
+    //   this.times = {
+    //     to: this.validateTime(end),
+    //     from: this.validateTime(start),
+    //   };
+    // },
+    // validateTime(value = "") {
+    //   const [h, m = "00"] = value.split(":");
+    //   return moment(`${h}:${m}`, "HH:mm").format("HH:mm");
+    // },
   },
 };
 </script>
@@ -117,6 +131,11 @@ export default {
 .input
   width: 200px
   border: 1px solid var(--gray-secondary)
+  & :deep(input)
+    min-width: 50px
+    --text-size: 14px
+  & :deep(.q-field__control)
+    padding-left: 1rem
 
 .icon :deep(path)
   fill: var(--font-grey-color)