Add more permissions

resources/js/Components/DatePickerField.vue

@@ -2,23 +2,24 @@
 import InputLabel from "./InputLabel.vue";
 import InputError from "./InputError.vue";
 import { computed } from "vue";
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
 
 /*
-  DatePickerField (v-calendar)
-  - A thin wrapper around <VDatePicker> with a label and error support.
-  - Uses v-calendar which handles popovers/teleport well inside modals.
-  API: kept compatible with previous usage where possible.
+  DatePickerField (vue-datepicker wrapper)
+  - Replaces previous v-calendar usage to avoid range/dayIndex runtime errors.
+  - Keeps API compatible with existing callers.
   Props:
     - modelValue: Date | string | number | null
     - id: string
     - label: string
     - format: string (default 'dd.MM.yyyy')
     - enableTimePicker: boolean (default false)
-    - inline: boolean (default false)  // When true, keeps the popover visible
+    - inline: boolean (default false)
     - placeholder: string
     - error: string | string[]
-  Note: Props like teleportTarget/autoPosition/menuClassName/fixed/closeOn... were for the old picker
-        and are accepted for compatibility but are not used by v-calendar.
+    - legacy props (teleportTarget, autoPosition, menuClassName, fixed, closeOnAutoApply, closeOnScroll)
+      are accepted for compatibility but only mapped where applicable.
 */
 
 const props = defineProps({
@@ -28,7 +29,7 @@ const props = defineProps({
   format: { type: String, default: "dd.MM.yyyy" },
   enableTimePicker: { type: Boolean, default: false },
   inline: { type: Boolean, default: false },
-  // legacy/unused in v-calendar (kept to prevent breaking callers)
+  // legacy props maintained for compatibility
   autoApply: { type: Boolean, default: false },
   teleportTarget: { type: [Boolean, String], default: "body" },
   autoPosition: { type: Boolean, default: true },
@@ -50,44 +51,31 @@ const valueProxy = computed({
   },
 });
 
-// Convert common date mask from lowercase tokens to v-calendar tokens
-const inputMask = computed(() => {
-  let m = props.format || "dd.MM.yyyy";
-  return (
-    m.replace(/yyyy/g, "YYYY").replace(/dd/g, "DD").replace(/MM/g, "MM") +
-    (props.enableTimePicker ? " HH:mm" : "")
-  );
-});
-
-const popoverCfg = computed(() => ({
-  visibility: props.inline ? "visible" : "click",
-  placement: "bottom-start",
-}));
+// vue-datepicker accepts format like 'dd.MM.yyyy' and controls 24h time via is-24 prop
+const inputClasses =
+  "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500";
 </script>
 
 <template>
   <div class="col-span-6 sm:col-span-4">
     <InputLabel v-if="label" :for="id" :value="label" />
 
-    <!-- VCalendar DatePicker with custom input to keep Tailwind styling -->
-    <VDatePicker
+    <VueDatePicker
       v-model="valueProxy"
-      :mode="enableTimePicker ? 'dateTime' : 'date'"
-      :masks="{ input: inputMask }"
-      :popover="popoverCfg"
-      :is24hr="true"
-    >
-      <template #default="{ inputValue, inputEvents }">
-        <input
-          :id="id"
-          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-          :placeholder="placeholder"
-          :value="inputValue"
-          autocomplete="off"
-          v-on="inputEvents"
-        />
-      </template>
-    </VDatePicker>
+      :format="format"
+      :enable-time-picker="enableTimePicker"
+      :is-24="true"
+      :inline="inline"
+      :auto-apply="autoApply"
+      :teleport="false"
+      :close-on-auto-apply="closeOnAutoApply"
+      :close-on-scroll="closeOnScroll"
+      :input-class-name="inputClasses"
+      :menu-class-name="'z-[1000]'"
+      :locale="'sl'"
+      :id="id"
+      :placeholder="placeholder"
+    />
 
     <template v-if="error">
       <InputError
@@ -102,5 +90,5 @@ const popoverCfg = computed(() => ({
 </template>
 
 <style>
-/* Ensure the date picker menu overlays modals/dialogs */
+/* vue-datepicker provides its own menu layering; base CSS imported above */
 </style>